@charset "UTF-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2021/9/16, 下午 02:09:34
    Author     : Tomoaki Chen
*/
/* [FIXME202409161359] wid-xxx 系列看要不要拆出 aki-layout-wid */
html.whole-view, html.whole-view body {
    min-height: 100vh; /*min-height: 100%;*/ /* height: 100%;*/
    /*height: fit-content;*/
    margin: 0;
}

.wid-icon {
    width: 16px;
    max-width:16px;
    min-width:16px;
}

.wid-fit {
    width: fit-content;
    min-width: fit-content;
}

.wid-5 {
    width:5%;
}

.wid-10 {
    width:10%;
}

.wid-15 {
    width:15%;
}

.wid-20 {
    width:20%;
}

.wid-25 {
    width:25%;
}

.wid-30 {
    width:30%;
}

.wid-35 {
    width:35%;
}

.wid-40 {
    width:40%;
}


.wid-45 {
    width:45%;
}

.wid-50 {
    width:50%;
}

.wid-55 {
    width:55%;
}

.wid-60 {
    width:60%;
}


.wid-65 {
    width:65%;
}

.wid-70 {
    width:70%;
}

.wid-75 {
    width:75%;
}

.wid-80 {
    width:80%;
}

.wid-85 {
    width:85%;
}

.wid-90 {
    width:90%;
}

.wid-95 {
    width:95%;
}

.wid-100 {
    width:100%;
}

.wid-33 {
    width: 33%;
}

/* ================================ 以下是 區塊、欄位寬度，介於 1801px 以上的 lg ================================ */
/*@media screen and (min-width: 1301px) {*/
@media (min-width: 1801px) {

    .wid-icon[class*="wid-lg-"] {
        min-width: unset;
        max-width: unset;
    }

    .wid-lg-5 {
        width:5%;
    }

    .wid-lg-10 {
        width:10%;
    }

    .wid-lg-15 {
        width:15%;
    }

    .wid-lg-20 {
        width:20%;
    }

    .wid-lg-25 {
        width:25%;
    }

    .wid-lg-30 {
        width:30%;
    }

    .wid-lg-35 {
        width:35%;
    }

    .wid-lg-40 {
        width:40%;
    }


    .wid-lg-45 {
        width:45%;
    }

    .wid-lg-50 {
        width:50%;
    }

    .wid-lg-55 {
        width:55%;
    }

    .wid-lg-60 {
        width:60%;
    }


    .wid-lg-65 {
        width:65%;
    }

    .wid-lg-70 {
        width:70%;
    }

    .wid-lg-75 {
        width:75%;
    }

    .wid-lg-80 {
        width:80%;
    }

    .wid-lg-85 {
        width:85%;
    }

    .wid-lg-90 {
        width:90%;
    }

    .wid-lg-95 {
        width:95%;
    }

    .wid-lg-100 {
        width:100%;
    }

    .wid-lg-33 {
        width: 33%;
    }
}
/* ================================ 以上是 區塊、欄位寬度，介於 1801px 以上的 lg ================================ */



/* ================================ 以下是 區塊、欄位寬度，介於 1391px ~ 1800px 的 md ================================ */
/* @media screen and @media (max-width: 1300px) { */
@media (min-width: 1391px) and (max-width: 1800px) {

    .wid-icon[class*="wid-md-"] {
        min-width: unset;
        max-width: unset;
    }

    .wid-md-5 {
        width:5%;
    }

    .wid-md-10 {
        width:10%;
    }

    .wid-md-15 {
        width:15%;
    }

    .wid-md-20 {
        width:20%;
    }

    .wid-md-25 {
        width:25%;
    }

    .wid-md-30 {
        width:30%;
    }

    .wid-md-35 {
        width:35%;
    }

    .wid-md-40 {
        width:40%;
    }

    .wid-md-45 {
        width:45%;
    }

    .wid-md-50 {
        width: 50%;
    }

    .wid-md-55 {
        width: 55%;
    }

    .wid-md-60 {
        width: 60%;
    }

    .wid-md-65 {
        width: 65%;
    }

    .wid-md-70 {
        width: 70%;
    }

    .wid-md-75 {
        width: 75%;
    }

    .wid-md-80 {
        width: 80%;
    }

    .wid-md-85 {
        width: 85%;
    }

    .wid-md-90 {
        width: 90%;
    }

    .wid-md-95 {
        width: 95%;
    }

    .wid-md-100 {
        width: 100%;
    }

    .wid-md-33 {
        width: 33%;
    }
}
/* ================================ 以上是 區塊、欄位寬度，介於 1391px ~ 1800px 的 md ================================ */


/* ================================ 以下是 區塊、欄位寬度，介於 1390px ~ 1800px 的 sm ================================ */
/*@media screen and (max-width: 990px) {*/
@media (max-width: 1390px) {

    .wid-icon[class*="wid-sm-"] {
        min-width: unset;
        max-width: unset;
    }

    .wid-sm-5 {
        width:5%;
    }

    .wid-sm-10 {
        width:10%;
    }

    .wid-sm-15 {
        width:15%;
    }

    .wid-sm-20 {
        width:20%;
    }


    .wid-sm-25 {
        width:25%;
    }

    .wid-sm-30 {
        width:30%;
    }

    .wid-sm-35 {
        width:35%;
    }

    .wid-sm-40 {
        width:40%;
    }


    .wid-sm-45 {
        width:45%;
    }

    .wid-sm-50 {
        width:50%;
    }

    .wid-sm-55 {
        width:55%;
    }

    .wid-sm-60 {
        width:60%;
    }

    .wid-sm-65 {
        width:65%;
    }

    .wid-sm-70 {
        width:70%;
    }

    .wid-sm-75 {
        width:75%;
    }

    .wid-sm-80 {
        width: 80%;
    }

    .wid-sm-85 {
        width: 85%;
    }

    .wid-sm-90 {
        width: 90%;
    }

    .wid-sm-95 {
        width: 95%;
    }

    .wid-sm-100 {
        width: 100%;
    }

    .wid-sm-33 {
        width: 33%;
    }
}
/* ================================ 以上是 區塊、欄位寬度，介於 1390px ~ 1800px 的 sm ================================ */


/* ================================ 以下是 區塊、欄位在寬度下是否顯示 ================================  */
/* lg */
@media (min-width: 1801px) {

    [class*="wid-"].block-sm-visible /* .block-sm-visible */ {
        display: none;
    }
}

/* md */
@media (min-width: 1391px) and (max-width: 1800px) {

    [class*="wid-"].block-sm-visible /* .block-sm-visible */ {
        display: none;
    }

    [class*="wid-"].block-md-hidden {
        display: none;
    }
}

/* sm */
@media (max-width: 1390px) {
    [class="wid-"].wid-sm-none {
        display: none;
    }

    [class*="wid-"].block-sm-hidden {
        display: none;
    }

    [class="wid-"].block-sm-visible {
        display: block;
    }
}
/* ================================ 以上是 區塊、欄位在寬度下是否顯示 ================================  */

.flex-align-container .wid-fill,
.flex-align-container .block-fill,
.flex-grid .wid-fill,
.flex-grid .block-fill{
    flex-grow: 1;
}



/* -------------------------------------------------------------------------------------------------------------- */
.block-container [class*="wid-"] {
    display: inline-block;
}




.space-8, .space-12, .space-16, .space-32, .space-48 {
    display: inline-block;
    width: 100%;
}

/*
.space-16, .space-32 {
    display: inline-block;
}
*/

.space-8 {
    padding-top:4px;
    padding-bottom: 4px;
}

.space-12 {
    padding-top:6px;
    padding-bottom: 6px;
}

.space-16 {
    padding-top:8px;
    padding-bottom: 8px;
}

.space-32 {
    padding-top:16px;
    padding-bottom: 16px;
}

.space-48 {
    padding-top: 24px;
    padding-bottom: 24px;
}



/* ======================================== 以下 各種 align 方式，有 block 和 flex 底下兩種  ======================================== */
/* [FIXME202409161359] 看要不要拆出 aki-layout-align */
.block-align-container {
    display: block;
}

.block-align-container.align-right, .block-align-right {
    text-align: right;
}

.block-align-container.align-center, .block-align-center {
    text-align: center;
}


/*
.align-container.flex-align-right {
    margin-left: auto;
}

.align-container.flex-align-center {
    justify-content: center;
}
*/

.flex-inline,
.flex-align-container {
    display: flex;
}

.flex-align-container.align-right-reversed, flex-align-right-reversed {
    /* 因為是從反向(右邊)開始，所以會類似靠右效果 */
    flex-direction: row-reverse;
}

.flex-align-container.align-right, .flex-align-right {
    /*    margin-left: auto;*/
    justify-content: flex-end;
}

.flex-align-container.align-center, .flex-align-center {
    justify-content: center;
}

.flex-inline .flex-align-container {
    display: inline-flex;
}


@media (max-width: 1390px) {
    .flex-align-container.align-left-sm, .flex-align-sm {
        justify-content: flex-start; /* margin-left: auto;*/
    }
}

.flex-align-container.vertical-top, .flex-vertical-top {
    align-items: flex-start;
}

.flex-align-container.vertical-center, .flex-vertical-center {
    align-items: center;
}

.flex-align-container.vertical-bottom, .flex-vertical-bottom {
    align-items: flex-end;
}

.flex-eq-height, .flex-eq-height.flex-align-center {
    display: flex;
    flex-wrap: nowrap; /*flex-wrap: wrap;*/
    align-items: normal;
}
/* ======================================== 以上 各種 align 方式，有 block 和 flex 底下兩種  ======================================== */


/* ======================================== 以下 文字的上標、下標 =========================================== */
.mark-script {
    font-size: 0.8em; /* font-size: 0.8rem; */
}


.mark-script-container {
    display: flex;
}

.mark-script-container .super-script,
.mark-script-container .sub-script {
    font-size: 0.8em; /* font-size: 0.8rem; */
    padding-left: 4px;
    padding-right: 4px;
}

.mark-script-container .super-script {
    /* align-items: flex-start; */
    align-self: flex-start;
}

.mark-script-container .sub-script {
    /* align-items: flex-end; */
    align-self: flex-end;
}

.mark-script-container .super-script.script-lg,
.mark-script-container .sub-script.script-lg {
    /* 
    要注意這會受「父層(比如 .mark-script-container)」本身的字型大小影響(如果該 container 有縮小，則會更小) --> [???202407111424] 有疑慮，有可能是 aki-pf-layout 影響的
    ==> 「可能」沒錯(還是待驗證)，但現在實例中並不是因為這個因素而大小變化方式不如預期，見 aki-pf-layout、masterpiece-recommendation-layout
    ==> 實例中似乎會變成 super-script 下面包 .pi ，兩層都會被 font-size 往小的方向調整 (rem 小於 1)，所以會「更小」(還是待驗證)
    */
    font-size: 0.875em;/* 0.875rem; */
}

.mark-script-container .super-script.script-xl,
.mark-script-container .sub-script.script-xl {
    font-size: 0.950em; /* 0.950rem; */
}

.mark-script-container .super-script.script-sm,
.mark-script-container .sub-script.script-sm {
    font-size: 0.725em; /* 0.725rem; */
}

.mark-script-container .super-script.script-xs,
.mark-script-container .sub-script.script-xs {
    font-size:  0.65em;/* 0.65rem; */
}


.mark-script-container .super-script.script-sm {

}
/* ======================================== 以下 文字的上標、下標 ======================================== */



.flex-align-container.stack-vertical, .flex-stack-vertical {
    flex-direction: column;
}


/* ======================================== 以下 command 按鈕、或者類似按鈕等操作 UI ======================================== */
.command-block {
    display: block;
    width: 100%;
}

.command-block > .block-facet {
    display: inline-block;
}

.flex-command-block {
    display: flex;
    width: 100%;
}

.flex-command-block > .block-facet,
.flex-command-block > .block-facet.flex-align-container {
    display: inline-flex;
}
/* ======================================== 以上 command 按鈕、或者類似按鈕等操作 UI ======================================== */


.flex-align-container {
    --item-side-margin: calc(var(--item-margin, 8px) / 2);
}

.flex-align-container .align-item:not(:first-child):not(:last-child) {
    margin-left: var(--item-side-margin);
    margin-right: var(--item-side-margin);
}

.flex-align-container .align-item:first-child {
    margin-right: var(--item-side-margin);
}

.flex-align-container .align-item:last-child {
    margin-left: var(--item-side-margin);
}