html {
    font-family: 微軟正黑體, Arial, Verdana, Helvetica, clean, sans-serif !important;
    font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* 基本樣式：模仿 Bootstrap outline button */
[class^="btn-outline-custom"] {
    border: 1px solid transparent;
    color: #fff;
}

.btn-outline-custom1 {
    border-color: #e6194b;
    color: #e6194b;
}

    .btn-outline-custom1:hover, .btn-outline-custom1:checked + label {
        background-color: #e6194b;
        color: #fff;
    }

.btn-outline-custom2 {
    border-color: #3cb44b;
    color: #3cb44b;
}

    .btn-outline-custom2:hover, .btn-outline-custom2:checked + label {
        background-color: #3cb44b;
        color: #fff;
    }

.btn-outline-custom3 {
    border-color: #ffe119;
    color: #bba600;
}

    .btn-outline-custom3:hover, .btn-outline-custom3:checked + label {
        background-color: #ffe119;
        color: #000;
    }

.btn-outline-custom4 {
    border-color: #4363d8;
    color: #4363d8;
}

    .btn-outline-custom4:hover, .btn-outline-custom4:checked + label {
        background-color: #4363d8;
        color: #fff;
    }

.btn-outline-custom5 {
    border-color: #f58231;
    color: #f58231;
}

    .btn-outline-custom5:hover, .btn-outline-custom5:checked + label {
        background-color: #f58231;
        color: #fff;
    }

.btn-outline-custom6 {
    border-color: #911eb4;
    color: #911eb4;
}

    .btn-outline-custom6:hover, .btn-outline-custom6:checked + label {
        background-color: #911eb4;
        color: #fff;
    }

.btn-outline-custom7 {
    border-color: #46f0f0;
    color: #00aaaa;
}

    .btn-outline-custom7:hover, .btn-outline-custom7:checked + label {
        background-color: #46f0f0;
        color: #000;
    }

.btn-outline-custom8 {
    border-color: #f032e6;
    color: #f032e6;
}

    .btn-outline-custom8:hover, .btn-outline-custom8:checked + label {
        background-color: #f032e6;
        color: #fff;
    }

.btn-outline-custom9 {
    border-color: #bcf60c;
    color: #6aa300;
}

    .btn-outline-custom9:hover, .btn-outline-custom9:checked + label {
        background-color: #bcf60c;
        color: #000;
    }

.btn-outline-custom10 {
    border-color: #fabebe;
    color: #a55a5a;
}

    .btn-outline-custom10:hover, .btn-outline-custom10:checked + label {
        background-color: #fabebe;
        color: #000;
    }

.btn-outline-custom11 {
    border-color: #008080;
    color: #008080;
}

    .btn-outline-custom11:hover, .btn-outline-custom11:checked + label {
        background-color: #008080;
        color: #fff;
    }

.btn-outline-custom12 {
    border-color: #e6beff;
    color: #800080;
}

    .btn-outline-custom12:hover, .btn-outline-custom12:checked + label {
        background-color: #e6beff;
        color: #000;
    }

.btn-outline-custom13 {
    border-color: #9a6324;
    color: #9a6324;
}

    .btn-outline-custom13:hover, .btn-outline-custom13:checked + label {
        background-color: #9a6324;
        color: #fff;
    }

.btn-outline-custom14 {
    border-color: #fffac8;
    color: #bbaa33;
}

    .btn-outline-custom14:hover, .btn-outline-custom14:checked + label {
        background-color: #fffac8;
        color: #000;
    }

.btn-outline-custom15 {
    border-color: #800000;
    color: #800000;
}

    .btn-outline-custom15:hover, .btn-outline-custom15:checked + label {
        background-color: #800000;
        color: #fff;
    }

.btn-outline-custom16 {
    border-color: #aaffc3;
    color: #00aa66;
}

    .btn-outline-custom16:hover, .btn-outline-custom16:checked + label {
        background-color: #aaffc3;
        color: #000;
    }

.btn-outline-custom17 {
    border-color: #808000;
    color: #808000;
}

    .btn-outline-custom17:hover, .btn-outline-custom17:checked + label {
        background-color: #808000;
        color: #fff;
    }

.btn-outline-custom18 {
    border-color: #ffd8b1;
    color: #bb6600;
}

    .btn-outline-custom18:hover, .btn-outline-custom18:checked + label {
        background-color: #ffd8b1;
        color: #000;
    }

.btn-outline-custom19 {
    border-color: #000075;
    color: #000075;
}

    .btn-outline-custom19:hover, .btn-outline-custom19:checked + label {
        background-color: #000075;
        color: #fff;
    }

.btn-outline-custom20 {
    border-color: #808080;
    color: #808080;
}

    .btn-outline-custom20:hover, .btn-outline-custom20:checked + label {
        background-color: #808080;
        color: #fff;
    }



/* === Ebook 專用圖片框架 ===
   預設比例 11:15，可用 data-ratio 覆寫（例如 16x9、4:3、243x332） */
.ebook-img-frame {
    --ratio-w: 11;
    --ratio-h: 15;
    display: block;
    position: relative;
    aspect-ratio: var(--ratio-w) / var(--ratio-h);
    overflow: hidden; /* 支援圓角裁切 */
    background: #f3f4f6; /* 骨架底色 */
}

/* 物件填充模式（擇一） */
.ebook-img-fill {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}
/* 不裁切、不留白（允許變形）*/
.ebook-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 無留白、可能裁切 */
.ebook-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
/* 不裁切、不變形、會留白 */

/* 載入效果（骨架＋淡入） */
.ebook-img-fade {
    opacity: 0;
    transition: opacity .28s ease;
}

.ebook-img-loaded {
    opacity: 1;
}

.ebook-skeleton {
    background: linear-gradient(90deg, #eee, #f5f5f5 40%, #eee 80%);
    background-size: 200% 100%;
    animation: ebook-shimmer 1.2s linear infinite;
}

@keyframes ebook-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* 無 aspect-ratio 瀏覽器回退（極少數舊版） */
@supports not (aspect-ratio: 1 / 1) {
    .ebook-img-frame::before {
        content: "";
        display: block;
        padding-top: calc(var(--ratio-h) / var(--ratio-w) * 100%); /* 依比例撐高 */
    }

    .ebook-img-frame > img {
        position: absolute;
        inset: 0;
    }
}