﻿:root {
    --template-bg: #eef4f2;
    --template-header-bg: #f8fbfa;
    --template-footer-bg: #e5efec;
    --template-sidebar-bg: #e0eee9;
    --template-surface: #ffffff;
    --template-text: #1f2f36;
    --template-muted: #586b73;
    --template-header-text: #1f2f36;
    --template-header-muted: #3f5962;
    --template-footer-text: #445b63;
    --template-line: #d8dfdd;
    --template-accent: #2f7272;
    --template-accent-strong: #075464;
    --template-soft: #e9f1ee;
    --template-shadow: 0 16px 36px rgba(31, 47, 54, .10);
    --template-shadow-soft: 0 8px 20px rgba(31, 47, 54, .08);
}

html {
    background: var(--template-bg);
}

body.template-2026 {
    background: var(--template-bg);
    color: var(--template-text);
    font-family: "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0;
}

.template-2026 a {
    color: var(--template-accent-strong);
}

.template-2026 a:hover,
.template-2026 a:focus {
    color: var(--template-accent);
    text-decoration: underline;
}

.template-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0;
}

.template-header-band {
    background: var(--template-header-bg);
    border-bottom: 1px solid var(--template-line);
    box-shadow: 0 10px 28px rgba(31, 47, 54, .08);
    padding-top: 50px;
}

.template-header-band:after {
    content: "";
    display: block;
    height: 4px;
    background: var(--template-accent);
}

body.template-2026 #header.template-header {
    margin: 0 auto;
}

body.template-2026 .template-header,
body.template-2026 .template-content,
body.template-2026 .template-footer {
    max-width: calc(100% - 96px);
}

@media (min-width: 1200px) {
    body.template-2026 .template-header,
    body.template-2026 .template-content,
    body.template-2026 .template-footer {
        width: 1440px;
    }
}

@media (min-width: 1600px) {
    body.template-2026 .template-header,
    body.template-2026 .template-content,
    body.template-2026 .template-footer {
        width: 1520px;
    }
}

.template-header {
    padding-top: 38px;
    padding-bottom: 34px;
}

.template-header .col-md-12 {
    padding-bottom: 0;
}

.template-header h1 {
    display: inline-block;
    margin: 0 12px 0 0;
    border-left: 5px solid var(--template-accent);
    padding-left: 14px;
    color: var(--template-header-text);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
}

.template-header h6 {
    display: inline-block;
    margin: 0;
    color: var(--template-header-muted);
    font-size: 17px;
    font-weight: 400;
}

.template-header p {
    margin: 8px 0 0;
    color: var(--template-header-muted);
    font-size: 15px;
    letter-spacing: 2px;
}

.template-content {
    flex: 1 0 auto;
    padding-top: 28px;
    padding-bottom: 32px;
}

.template-main,
.template-sidebar {
    min-height: 1px;
}

.template-main .post {
    background: var(--template-surface);
    border: 1px solid var(--template-line);
    border-top: 4px solid var(--template-accent);
    border-radius: 6px;
    box-shadow: var(--template-shadow);
    padding: 24px 36px 36px;
    margin-bottom: 28px;
    min-height: 500px;
}

.template-main .post:before,
.template-main .post:after,
.template-2026 .dataTables_wrapper:before,
.template-2026 .dataTables_wrapper:after {
    content: "";
    display: table;
}

.template-main .post:after,
.template-2026 .dataTables_wrapper:after {
    clear: both;
}

.template-2026 .table-responsive,
.template-2026 .dataTables_wrapper {
    clear: both;
}

.template-main h2,
.template-sidebar h2 {
    margin-top: 0;
    color: var(--template-accent-strong);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 3px;
}

.template-main h2 {
    border-bottom: 1px solid var(--template-line);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.template-main .post dl {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border: 1px solid var(--template-line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.template-main .post dt,
.template-main .post dd {
    margin: 0;
    border-bottom: 1px solid var(--template-line);
    padding: 12px 16px;
    min-height: 48px;
    line-height: 1.7;
}

.template-main .post dt {
    background: #f7faf9;
    color: var(--template-accent-strong);
    font-weight: 700;
    letter-spacing: 1px;
}

.template-main .post dd {
    color: var(--template-text);
    word-break: break-word;
}

.template-main .post dt:nth-last-child(2),
.template-main .post dd:last-child {
    border-bottom: 0;
}

.template-main .post dd img {
    margin-top: 6px;
    margin-bottom: 6px;
}

.template-sidebar #sidebar {
    background: var(--template-sidebar-bg);
    border: 1px solid var(--template-line);
    border-left: 4px solid var(--template-accent);
    border-radius: 6px;
    box-shadow: var(--template-shadow-soft);
    padding: 20px;
    margin-bottom: 24px;
}

.template-sidebar ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.template-sidebar li {
    margin: 0;
}

.template-sidebar li li {
    border-top: 1px solid rgba(37, 49, 58, .12);
    margin: 0;
    padding: 9px 0;
}

.template-sidebar li li a {
    display: block;
    border-radius: 4px;
    padding: 3px 8px;
}

.template-sidebar li li.active {
    position: relative;
    margin-top: 8px;
    margin-bottom: 8px;
    border-top-color: transparent;
}

.template-sidebar li li.active span {
    display: block;
    border-radius: 4px;
    background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    color: var(--template-accent-strong);
    font-weight: 700;
    padding: 6px 8px 6px 12px;
}

.template-sidebar li li a:hover,
.template-sidebar li li a:focus {
    background: rgba(255, 255, 255, .62);
    text-decoration: none;
}

.template-2026 table.table {
    background: #fff;
    margin-top: 34px;
    margin-bottom: 0;
    font-size: 14px;
}

.template-2026 table.table th {
    width: 32%;
    background: #f7faf9;
    color: var(--template-text);
    font-weight: 700;
    letter-spacing: 2px;
}

.template-2026 table.table th,
.template-2026 table.table td {
    border-color: #dcdcdc;
    padding: 8px 10px;
    vertical-align: middle;
}

.template-2026 table.table td {
    color: #111;
    letter-spacing: 2px;
}

.template-footer {
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--template-footer-text);
    font-size: 14px;
    letter-spacing: 2px;
}

.template-footer-band {
    flex-shrink: 0;
    background: var(--template-footer-bg);
    border-top: 4px solid var(--template-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
}

.template-footer #footer {
    padding-top: 0;
}

.template-footer a {
    color: var(--template-accent-strong);
}

@media (max-width: 767px) {
    body.template-2026 .template-header,
    body.template-2026 .template-content,
    body.template-2026 .template-footer {
        max-width: 100%;
    }

    .template-header {
        padding-top: 26px;
        padding-bottom: 24px;
    }

    .template-header .col-md-12 {
        padding-bottom: 0;
    }

    .template-header h1,
    .template-header h6 {
        display: block;
    }

    .template-header h1 {
        margin-bottom: 8px;
    }

    .template-main {
        margin-top: 18px;
    }

    .template-main .post {
        padding: 20px 16px 28px;
        min-height: 0;
    }

    .template-main .post dl {
        grid-template-columns: 1fr;
    }

    .template-main .post dt {
        border-bottom: 0;
        padding-bottom: 4px;
    }

    .template-main .post dd {
        padding-top: 4px;
    }

    .template-2026 table.table {
        margin-top: 18px;
    }
}
