/* ============================================================================
   Bootstrap 3.4.1 字體大小相容性 CSS
   
   目的: 確保從舊版 Bootstrap 升級到 3.4.1 後,字體大小維持不變
   網站: 臺灣菸酒股份有限公司 (www.ttl.com.tw)
   日期: 2025-12-12
   修正項目: B001 - 使用之第三方元件具有安全性漏洞
   
   使用方式:
   必須在 Bootstrap 3.4.1 載入後立即載入此檔案
   <link href="/css/bootstrap-fontsize-compatibility.css" rel="stylesheet" />
   
   ⚠️ 重要: 使用 rem 單位確保響應式縮放
   基準: 1rem = 14px (假設 html font-size 為 14px)
   ============================================================================ */

/* ============================================================================
   基礎字體設定 (使用 rem 單位)
   ============================================================================ */

/* 設定根元素字體大小為 14px */
html {
    font-size: 14px !important;
}

/* 基礎字體大小使用 1rem (相當於 14px) */
body {
    font-size: 1rem !important;
    line-height: 1.428571429;
}

/* ============================================================================
   標題字體大小 (使用 rem 單位)
   ============================================================================ */

h1, .h1 {
    font-size: 2.571rem !important; /* 36px ÷ 14 = 2.571rem */
}

h2, .h2 {
    font-size: 2.143rem !important; /* 30px ÷ 14 = 2.143rem */
}

h3, .h3 {
    font-size: 1.714rem !important; /* 24px ÷ 14 = 1.714rem */
}

h4, .h4 {
    font-size: 1.286rem !important; /* 18px ÷ 14 = 1.286rem */
}

h5, .h5 {
    font-size: 1rem !important; /* 14px ÷ 14 = 1rem */
}

h6, .h6 {
    font-size: 0.857rem !important; /* 12px ÷ 14 = 0.857rem */
}

/* ============================================================================
   段落與文字樣式 (使用 rem 單位)
   ============================================================================ */

p {
    margin: 0 0 0.714rem; /* 10px ÷ 14 = 0.714rem */
    font-size: 1rem !important;
}

small, .small {
    font-size: 85%;
}

.lead {
    font-size: 1.5rem !important; /* 21px ÷ 14 = 1.5rem */
}

/* ============================================================================
   表單元素字體大小 (使用 rem 單位)
   ============================================================================ */

input,
button,
select,
textarea {
    font-size: 1rem !important;
}

.form-control {
    font-size: 1rem !important;
    height: 2.429rem; /* 34px ÷ 14 = 2.429rem */
    padding: 0.429rem 0.857rem; /* 6px 12px */
}

.form-control-lg {
    font-size: 1.286rem !important; /* 18px ÷ 14 = 1.286rem */
    height: 3.286rem; /* 46px ÷ 14 = 3.286rem */
    padding: 0.714rem 1.143rem; /* 10px 16px */
}

.form-control-sm {
    font-size: 0.857rem !important; /* 12px ÷ 14 = 0.857rem */
    height: 2.143rem; /* 30px ÷ 14 = 2.143rem */
    padding: 0.357rem 0.714rem; /* 5px 10px */
}

.input-group-addon {
    font-size: 1rem !important;
    padding: 0.429rem 0.857rem;
}

label,
.control-label {
    font-size: 1rem !important;
}

.form-group label {
    font-size: 1rem !important;
}

.help-block {
    font-size: 1rem !important;
}

/* ============================================================================
   按鈕字體大小 (使用 rem 單位)
   ============================================================================ */

.btn {
    font-size: 1rem !important;
    padding: 0.429rem 0.857rem;
}

.btn-lg {
    font-size: 1.286rem !important;
    padding: 0.714rem 1.143rem;
}

.btn-sm {
    font-size: 0.857rem !important;
    padding: 0.357rem 0.714rem;
}

.btn-xs {
    font-size: 0.857rem !important;
    padding: 0.071rem 0.357rem;
}

.btn-group > .btn {
    font-size: 1rem !important;
}

/* ============================================================================
   導航列字體 (使用 rem 單位)
   ============================================================================ */

.navbar {
    font-size: 1rem !important;
}

.navbar-brand {
    font-size: 1.286rem !important;
}

.navbar-nav > li > a {
    font-size: 1rem !important;
    line-height: 1.429rem;
}

.navbar-text {
    font-size: 1rem !important;
}

.navbar-form .form-control {
    font-size: 1rem !important;
}

/* ============================================================================
   表格字體 (使用 rem 單位)
   ============================================================================ */

.table {
    font-size: 1rem !important;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        font-size: 1rem !important;
    }

/* ============================================================================
   麵包屑導航 (使用 rem 單位)
   ============================================================================ */

.breadcrumb {
    font-size: 1rem !important;
}

    .breadcrumb > li {
        font-size: 1rem !important;
    }

        .breadcrumb > li + li:before {
            font-size: 1rem !important;
        }

/* ============================================================================
   分頁 (使用 rem 單位)
   ============================================================================ */

.pagination {
    font-size: 1rem !important;
}

    .pagination > li > a,
    .pagination > li > span {
        padding: 0.429rem 0.857rem;
        font-size: 1rem !important;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    font-size: 1.286rem !important;
    padding: 0.714rem 1.143rem;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    font-size: 0.857rem !important;
    padding: 0.357rem 0.714rem;
}

.pager {
    font-size: 1rem !important;
}

    .pager li > a,
    .pager li > span {
        font-size: 1rem !important;
    }

/* ============================================================================
   標籤與徽章 (使用 rem 單位)
   ============================================================================ */

.label {
    font-size: 75%;
}

.badge {
    font-size: 0.857rem !important;
}

/* ============================================================================
   警告框 (使用 rem 單位)
   ============================================================================ */

.alert {
    font-size: 1rem !important;
}

.alert-heading {
    font-size: inherit;
}

/* ============================================================================
   面板 (使用 rem 單位)
   ============================================================================ */

.panel {
    font-size: 1rem !important;
}

.panel-heading {
    font-size: 1rem !important;
}

.panel-title {
    font-size: 1.143rem !important;
}

.panel-body {
    font-size: 1rem !important;
}

.panel-footer {
    font-size: 1rem !important;
}

/* ============================================================================
   列表群組 (使用 rem 單位)
   ============================================================================ */

.list-group-item {
    font-size: 1rem !important;
}

.list-group-item-heading {
    font-size: 1.286rem !important;
}

.list-group-item-text {
    font-size: 1rem !important;
}

/* ============================================================================
   下拉選單 (使用 rem 單位)
   ============================================================================ */

.dropdown-menu {
    font-size: 1rem !important;
}

    .dropdown-menu > li > a {
        font-size: 1rem !important;
    }

.dropdown-header {
    font-size: 0.857rem !important;
}

/* ============================================================================
   Modal 對話框 (使用 rem 單位)
   ============================================================================ */

.modal-title {
    font-size: 1.286rem !important;
}

.modal-body {
    font-size: 1rem !important;
}

.modal-footer {
    font-size: 1rem !important;
}

/* ============================================================================
   Tooltip 和 Popover (使用 rem 單位)
   ============================================================================ */

.tooltip {
    font-size: 0.857rem !important;
}

.tooltip-inner {
    font-size: 0.857rem !important;
}

.popover {
    font-size: 1rem !important;
}

.popover-title {
    font-size: 1rem !important;
}

.popover-content {
    font-size: 1rem !important;
}

/* ============================================================================
   Well 區塊 (使用 rem 單位)
   ============================================================================ */

.well {
    font-size: 1rem !important;
}

.well-lg {
    font-size: 1rem !important;
}

.well-sm {
    font-size: 1rem !important;
}

/* ============================================================================
   Jumbotron 大屏幕 (使用 rem 單位)
   ============================================================================ */

.jumbotron {
    font-size: 1.5rem !important;
}

    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 4.5rem !important;
    }

/* ============================================================================
   Progress Bar 進度條 (使用 rem 單位)
   ============================================================================ */

.progress-bar {
    font-size: 0.857rem !important;
}

/* ============================================================================
   Media Object 媒體物件 (使用 rem 單位)
   ============================================================================ */

.media-heading {
    font-size: 1.143rem !important;
}

.media-body {
    font-size: 1rem !important;
}

/* ============================================================================
   縮寫與地址 (使用 rem 單位)
   ============================================================================ */

abbr[title],
abbr[data-original-title] {
    font-size: inherit;
}

address {
    font-size: 1rem !important;
}

/* ============================================================================
   程式碼區塊 (使用 rem 單位)
   ============================================================================ */

code {
    font-size: 90%;
}

kbd {
    font-size: 90%;
}

pre {
    font-size: 0.929rem !important;
}

/* ============================================================================
   引用區塊 (使用 rem 單位)
   ============================================================================ */

blockquote {
    font-size: 1.25rem !important;
}

    blockquote footer,
    blockquote small,
    blockquote .small {
        font-size: 80%;
    }

/* ============================================================================
   文字對齊工具類別
   ============================================================================ */

.text-muted,
.text-primary,
.text-success,
.text-info,
.text-warning,
.text-danger {
    font-size: inherit;
}

/* ============================================================================
   響應式工具類別
   ============================================================================ */

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.hidden-xs,
.hidden-sm,
.hidden-md,
.hidden-lg {
    font-size: inherit !important;
}

/* ============================================================================
   Caption 說明文字 (使用 rem 單位)
   ============================================================================ */

.caption {
    font-size: 1rem !important;
}

/* ============================================================================
   Thumbnail 縮圖 (使用 rem 單位)
   ============================================================================ */

.thumbnail .caption {
    font-size: 1rem !important;
}

/* ============================================================================
   Carousel 輪播 (使用 rem 單位)
   ============================================================================ */

.carousel-caption {
    font-size: 1.5rem !important;
}

    .carousel-caption h1,
    .carousel-caption .h1 {
        font-size: 2.571rem !important;
    }

/* ============================================================================
   Tab 標籤頁 (使用 rem 單位)
   ============================================================================ */

.nav-tabs > li > a {
    font-size: 1rem !important;
}

.nav-pills > li > a {
    font-size: 1rem !important;
}

.nav-tabs.nav-justified > li > a {
    font-size: 1rem !important;
}

/* ============================================================================
   響應式字體大小調整 (可選)
   ============================================================================ */

/* 平板以下 (768px) */
@media (max-width: 767px) {
    html {
        font-size: 13px !important;
    }
}

/* 大螢幕 (1200px+) */
@media (min-width: 1200px) {
    html {
        font-size: 14px !important;
    }
}

/* ============================================================================
   rem 單位對照表 (供開發者參考)
   
   基準: 1rem = 14px (html font-size: 14px)
   
   常用尺寸:
   - 0.857rem = 12px
   - 1rem     = 14px
   - 1.143rem = 16px
   - 1.286rem = 18px
   - 1.5rem   = 21px
   - 1.714rem = 24px
   - 2.143rem = 30px
   - 2.571rem = 36px
   - 4.5rem   = 63px
   ============================================================================ */