@charset "utf-8";
/* design-chrome.css — 由 style.css 抽取的『共用外框(chrome)』樣式，供 _MainLayout(Bootstrap功能頁) 套用設計師版頭/intro/頁尾；不含頁面內容元件樣式，避免破壞 Bootstrap 內容。 */

:root {
    --bg: #fff8ec;
    --text: #40332f;
    --muted: #746961;
    --primary: #aa4b8f;
    --accent: #ff735d;
    --accent-soft: #ffd0c4;
    --card: #fff;
    --line: #d9cfc5;
    --focus: #1a73e8;
    --shadow: 0 8px 24px rgba(128, 82, 47, .16);
    /* 無障礙 CS2140401C：字級需用相對單位。100% 等於瀏覽器預設（一般為 16px），
       數值與原本的 16px 相同，但會隨使用者的瀏覽器字級設定縮放。 */
    font-size: 100%
}
html {
    background: linear-gradient(90deg, #734d00 0%, #b12b4c 100%)
}
body {
    margin: 0;
    color: var(--text);
    font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
    line-height: 1.65;
    background-color: var(--bg);
    background-image: 
        url("../img/round-orange.svg"),
        url("../img/round-white.svg"),
        url("../img/round-line.svg"),
        url("../img/round-line.svg"),
        radial-gradient(circle at 75% 0, #ffd0ad 0 1rem, transparent 30.1rem),
        linear-gradient(130deg, #fff8ec 0%, #fff8ec 55%, #ffe3c7 100%);
    background-position: 
        right 5% top -7rem,
        right 30% top 4rem,
        right -4rem top -5rem,
        left -5rem top 34rem,
        center top,
        center top;
    background-size: 
        600px 600px,
        317px 317px,
        579px 579px,
        579px 579px,
        auto,
        auto;
    background-repeat: no-repeat
}
.skip-link {
    position: absolute;
    left: 1rem;
    top: -5rem;
    z-index: 99;
    background: #000;
    color: #fff;
    padding: .75rem 1rem
}
.skip-link:focus {
    top: 1rem
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}
.site-header {
    padding-top: .5rem
}

/* 頁首各列的寬度比照設計師版面的 .container（1200px 置中）。
   功能頁沿用 Bootstrap 的 .container 會撐到接近滿版，導致頁首與內容左右對不齊，
   在較窄視窗還會撐出水平捲軸。本檔僅由功能頁載入，不影響設計頁。 */
.site-header .topbar,
.site-header .brand-row,
.site-header #site-nav,
.site-header .yip-demo-bar > .container,
.yip-demo-bar > .container {
    width: min(1200px, 100% - 48px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    font-size: .9rem
}
.quick-links {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none
}
.quick-links li+li:before {
    content: "|";
    margin-right: .5rem;
    color: var(--muted)
}
.font-size {
    display: flex;
    align-items: center;
    gap: .25rem
}
.font-size button {
    border: 0;
    border-radius: .35rem;
    background: #fff;
    color: #7a4d3b;
    font-weight: 700;
    min-width: 1.7rem;
    height: 1.7rem
}
.font-size button[aria-pressed=true] {
    background: #7a4d3b;
    color: #fff
}
.site-search {
    position: relative;
    display: flex;
    border: 1px solid var(--line);
    border-radius: .7rem;
    background: #fff;
    overflow: hidden
}
.site-search__icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    display: grid;
    place-items: center;
    color: var(--muted);
    pointer-events: none;
    transform: translateY(-50%)
}
.site-search__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round
}
.site-search input {
    border: 0;
    padding: .45rem .7rem .45rem 2.25rem;
    min-width: 11rem
}
.site-search button {
    min-height: 30px;
    margin: .2rem .2rem .2rem 0;
    border: 0;
    border-radius: .55rem;
    background: #b9472c;
    color: #fff;
    padding: .25rem 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease
}
.site-search button:hover {
    background: #a93f27;
    box-shadow: 0 3px 8px rgba(169, 90, 143, .24)
}
.site-search button:active {
    background: #94351f
}
.brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 0 .6rem
}
.brand-row .site-search {
    margin-left: auto
}
.brand {
    display: flex;
    align-items: center;
    gap: .75rem
}
.brand-row a.brand {
    text-decoration: none;
}
.brand-mark {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .45rem;
    background: #d71920;
    color: #fff;
    font-weight: 900
}
.brand-ministry {
    font-weight: 700;
    color: #d33b2f;
    line-height: 1.1
}
.brand-ministry small {
    color: #4b4b4b
}
.brand strong {
    font-size: 1.95rem;
    letter-spacing: .05em
}
.menu-toggle {
    display: none;
    border: 0;
    border-radius: 999px;
    background: #b9472c;
    color: #fff;
    padding: .55rem 1rem;
    font-weight: 700
}
.menu-toggle__icon {
    display: grid;
    gap: 4px;
    width: 1.35rem
}
.menu-toggle__icon span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease
}
.menu-toggle[aria-expanded=true] .menu-toggle__icon span:first-child {
    transform: translateY(6px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] .menu-toggle__icon span:nth-child(2) {
    opacity: 0
}
.menu-toggle[aria-expanded=true] .menu-toggle__icon span:last-child {
    transform: translateY(-6px) rotate(-45deg)
}
.mobile-only,
.primary-nav .mobile-only {
    display: none
}
.primary-nav {
    background: rgba(255, 255, 255, .82);
    border-radius: 999px;
    box-shadow: 0 2px 12px rgba(160, 120, 80, .08)
}
.primary-nav ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    padding: .35rem 1rem;
    list-style: none
}
.primary-nav a {
    display: block;
    padding: .3rem 1.1rem;
    border-radius: 999px;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.primary-nav a:hover {
    background: #fff;
    text-decoration: none;
    box-shadow: 0 0px 8px rgba(169, 90, 143, .24)
}
.primary-nav a:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .85)
}
.primary-nav a[aria-current="page"] {
    background: #89304f;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 9px rgba(96, 34, 62, .28)
}
.primary-nav a[aria-current="page"]:hover,
.primary-nav a[aria-current="page"]:focus-visible {
    background: #732640;
    color: #fff
}
.programs {
    position: relative;
    z-index: 2;
    margin-top: 2rem;
    background: #fff;
    border-radius: 6rem 0 0 6rem;
    box-shadow: var(--shadow);
    padding: 1.2rem 1rem 4.5rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.2rem 1.6rem
}
.program-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1.2rem
}
.programs::after {
    content: "";
    /* Bootstrap 的 .container::after clearfix 會把 display 改成 table，
       絕對定位 + display:table 會縮成內容大小(0×0)、忽略 top/bottom 拉伸
       → 白色右側延伸消失。功能頁載 Bootstrap，故明確指定 block。 */
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - 1px);
    width: calc((100vw - 100%) / 2 + 1px);
    background: #fff;
    pointer-events: none
}
.site-footer {
    position: relative;
    z-index: 1;
    background: linear-gradient(90deg, #734d00 0%, #b12b4c 100%);
    padding: 0 0 1px
}
.footer-inner {
    --footer-overlap: 140px;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1.2fr 2fr .8fr;
    gap: 2rem;
    /* 功能頁(_MainLayout)無設計師 .container 上限，grid 會撐到內容 min-content(~1400px)
       導致 ::before 亮面板 left:calc((100%-100vw)/2) 由負翻正、綠面板右移露出咖啡底。
       比照 #intro.footer-plan-menu.programs 的處理，給與設計頁 .container 相同的寬度上限。 */
    width: min(1200px, calc(100% - 48px));
    max-width: none;
    margin-top: calc(-140px - 2rem);
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: calc(var(--footer-overlap) + 2rem);
    padding-bottom: 2rem
}
.footer-inner::before {
    content: "";
    /* 同 .programs::after：需覆蓋 Bootstrap .container::before 的 display:table，
       否則綠色亮面板縮成 0×0、footer 連結直接落在咖啡底上而低對比。 */
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc((100% - 100vw) / 2);
    border-radius: 0 0 6rem 0;
    background: linear-gradient(140deg, #e2f1a3, #fff3ce 45%, #ffc8b7);
    box-shadow: 0 18px 30px rgba(72, 38, 23, .28)
}
.footer-inner::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    right: calc((100% - 100vw) / 2);
    bottom: -2rem;
    width: clamp(320px, 40vw, 579px);
    aspect-ratio: 1;
    background: url("../img/round-line.svg") center / contain no-repeat;
    opacity: .5;
    pointer-events: none;
}
.footer-inner > * {
    position: relative;
    z-index: 1
}
.footer-links {
    columns: 2;
    margin: 0;
    padding: 0;
    list-style: none
}
.footer-links li {
    break-inside: avoid;
    margin: 0 0 .7rem
}
.footer-links li:before {
    content: "●";
    color: #bf8b22;
    margin-right: .5rem
}
.footer-info {
    border-left: 1px solid #9d8e79;
    padding-left: 1rem;
    font-size: .92rem
}
.footer-info p {
    margin: .2rem 0
}
@media (max-width:900px) {
    .container {
        width: calc(100% - 32px);
        max-width: 760px
    }

    .topbar {
        display: none
    }

    .inner-content-shell {
        width: calc(100% - 32px);
        max-width: 760px;
        margin: 1.25rem auto;
        padding: 1.5rem 1rem 2rem;
        border-radius: 2rem
    }

    .inner-content-shell__inner {
        width: 100%;
        min-width: 0
    }

    .news-search-header,
    .news-list-section,
    .news-results,
    .news-search-panel,
    .news-search-grid {
        min-width: 0;
        max-width: 100%
    }

    .plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sitemap-card-grid,
    .sitemap-list {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .news-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .search-panel.news-search-panel {
        grid-template-columns: 1fr
    }

    .faq-search-panel.search-panel {
        grid-template-columns: 1fr
    }

    .faq-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: .35rem;
        -webkit-overflow-scrolling: touch
    }

    .faq-tabs .news-tab {
        flex: 0 0 auto
    }

    .news-search-actions {
        justify-content: center;
        margin-top: .25rem
    }

    .news-search-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.25rem;
        align-items: end
    }

    .news-search-field--date {
        grid-column: 1 / -1
    }

    .news-article__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .news-article__meta div:nth-child(odd) {
        border-left: 0
    }

    .news-article__meta div:nth-child(n + 3) {
        border-top: 1px solid #e0d9d4
    }

    .plan-detail-header {
        grid-template-columns: 1fr;
        margin-bottom: 1rem;
        padding: 0 0 1rem
    }

    .plan-detail-header .page-header {
        padding: .5rem .25rem 1rem
    }

    .plan-detail-header .page-title {
        white-space: normal
    }

    .plan-local-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .plan-local-nav__group {
        align-items: flex-start;
        padding: .75rem
    }

    .detail-list__row {
        grid-template-columns: 1fr
    }

    .detail-list dt {
        padding: .55rem 1rem;
        border-left: 4px solid #d65b3a;
        background-image: linear-gradient(to left, #f4f4f4 0%, #fff3e4 100%);
        text-align: left
    }

    .detail-list dd {
        min-width: 0;
        padding: .7rem 1rem;
        overflow-wrap: anywhere
    }

    .detail-list__row:nth-child(odd) dd,
    .detail-list__row:nth-child(even) dd {
        background: #fff
    }

    .detail-list__row:hover dd,
    .detail-list__row:focus-within dd {
        background: #fff3e8
    }

    .detail-section__header {
        min-height: 3.25rem
    }

    .course-table-wrap {
        width: 100%;
        min-width: 0;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch
    }

    .organizer-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .organizer-search-field:nth-child(2) {
        grid-column: span 1
    }

    .brand-row {
        position: relative;
        flex-wrap: nowrap;
        gap: .75rem;
        padding: .7rem 3.5rem .7rem 0
    }

    .brand-row>.site-search {
        display: none
    }

    .brand {
        min-width: 0;
        gap: .5rem
    }

    .brand-row > .brand {
        flex: 1 1 auto;
        overflow: hidden
    }

    .brand-ministry {
        display: inline-block;
        flex: 0 0 auto
    }

    .brand-ministry img {
        display: block;
        width: 6.5rem;
        max-width: 25vw;
        height: auto
    }

    .brand strong {
        font-size: clamp(1rem, 4.5vw, 1.4rem);
        line-height: 1.25;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .menu-toggle {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: 0;
        display: grid !important;
        flex: 0 0 auto;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        visibility: visible;
        opacity: 1;
        transform: translateY(-50%)
    }

    .primary-nav {
        display: none;
        border-radius: 1rem;
        padding-top: .5rem;
    }

    .primary-nav.is-open {
        display: block
    }

    .primary-nav .mobile-only {
        display: flex
    }

    .primary-nav .mobile-menu-search {
        width: calc(100% - 2rem);
        margin: 1rem;
        overflow: hidden
    }

    .mobile-menu-search input {
        min-width: 0;
        flex: 1
    }

    .primary-nav .primary-nav__links {
        display: grid;
        grid-template-columns: 1fr;
        gap: .2rem;
        padding: 0 1rem 1rem
    }

    .primary-nav .mobile-utility-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .35rem;
        margin: 0 1rem;
        padding: .85rem 0 1rem;
        border-top: 1px solid var(--line);
        list-style: none
    }

    .mobile-utility-nav a {
        padding: .4rem .25rem;
        color: var(--muted);
        font-size: .9rem;
        text-align: center
    }

    .hero-search {
        display: grid;
        gap: .65rem
    }

    .hero-search__header,
    .hero-search__header .search-tabs {
        display: contents
    }

    .search-tabs__tabs {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        order: 1
    }

    .hero-search__header>.section-title {
        order: 0;
        margin-bottom: .25rem
    }

    .search-tabs button,
    .search-tabs>a {
        position: relative;
        order: 3;
        width: 100%;
        min-height: 3rem;
        padding-right: 3rem;
        text-align: left
    }

    .search-tabs button.active {
        order: 1
    }

    .search-tabs button[role=tab]::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 1.15rem;
        font-size: 1.45rem;
        font-weight: 400;
        line-height: 1;
        transform: translateY(-50%)
    }

    .search-tabs button[role=tab].active::after {
        content: "−"
    }

    .search-tabs>a {
        order: 4
    }

    .search-tabs>a::after {
        content: "↗";
        position: absolute;
        top: 50%;
        right: 1.15rem;
        transform: translateY(-50%)
    }

    .hero-search>.search-panel {
        order: 2;
        margin-bottom: .25rem
    }

    .form-row,
    .date-range,
    .city-row {
        grid-template-columns: 1fr;
        width: 100%;
        transform: none
    }

    .form-actions {
        grid-template-columns: 1fr;
        width: 100%;
        transform: none
    }

    .form-actions .btn-primary {
        grid-column: 1
    }

    .form-row label,
    .form-row .form-row__label {
        text-align: left
    }

    .date-range__controls {
        grid-template-columns: 1fr
    }

    .date-range__controls span[aria-hidden=true] {
        display: none
    }

    .city-row__controls {
        grid-template-columns: 1fr
    }

    .content-grid {
        grid-template-columns: 1fr
    }

    .card-list li {
        grid-template-columns: 1fr;
        gap: .35rem
    }

    .programs {
        grid-template-columns: 1fr;
        border-radius: 2rem;
        padding-bottom: 2rem
    }

    .program-column {
        display: contents
    }

    .programs::after {
        display: none
    }

    .program-card h3[role=button] {
        position: relative;
        margin-bottom: 0;
        padding: .55rem 3rem .55rem 1rem;
        cursor: pointer;
        transition: background-color .2s ease, box-shadow .2s ease
    }

    .program-card h3[role=button]::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 1.15rem;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1;
        transform: translateY(-50%)
    }

    .program-card h3[role=button].is-open::after {
        content: "−"
    }

    .program-card h3[role=button]:focus-visible {
        outline: 3px solid var(--focus);
        outline-offset: 3px
    }

    .program-card h3[role=button]:not(.is-open)+ul {
        display: none
    }

    .program-card h3[role=button]+ul {
        padding-top: .45rem
    }

    .tag {
        display:none;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 2rem;
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom))
    }

    .site-footer {
        padding: 1.5rem 0
    }

    .footer-inner::before {
        right: calc((100% - 100vw) / 2);
        border-radius: 0
    }

    .footer-info,
    .badges {
        min-width: 0;
        border-left: 0;
        border-top: 1px solid #9d8e79;
        padding-top: 1rem;
        padding-left: 0
    }

    .footer-info__desktop-only {
        display: none
    }

    .footer-links {
        columns: 2;
        column-gap: 1.5rem
    }

    .badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .footer-inner::after {
        right: 0;
        bottom: 0;
        max-width: 100%
    }
}
@media (max-width:560px) {
    .brand {
        align-items: flex-start
    }

    .brand strong {
        font-size: 1.35rem
    }

    .site-search {
        width: 100%
    }

    .site-search input {
        min-width: 0;
        flex: 1
    }

    .search-panel {
        border-radius: 1.2rem;
        padding: 1rem
    }

    .breadcrumb {
        margin-bottom: 1rem;
        font-size: .95rem
    }

    .page-header {
        margin-bottom: 1.5rem
    }

    .page-title {
        font-size: 1.75rem
    }

    .plan-grid {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .link-categories {
        gap: 1.5rem
    }

    .link-grid {
        grid-template-columns: 1fr;
        gap: 1rem
    }

    .sitemap-note {
        padding: 1rem;
        border-radius: 14px
    }

    .sitemap-sections {
        gap: 1.75rem
    }

    .sitemap-card-grid,
    .sitemap-list {
        grid-template-columns: 1fr
    }

    .sitemap-card {
        min-height: 3.75rem;
        justify-content: flex-start;
        text-align: left
    }

    .link-card {
        min-height: 8.5rem
    }

    .news-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .4rem
    }

    .news-tabs.video-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .news-tabs.faq-tabs {
        display: flex;
        grid-template-columns: none
    }

    .news-search-header {
        display: block;
        margin-bottom: .65rem
    }

    .news-search-header .page-header {
        margin-bottom: .5rem
    }

    .news-tab {
        min-width: 0;
        padding-right: .4rem;
        padding-left: .4rem
    }

    .news-search-panel {
        padding: 1rem;
        border-radius: 0 0 12px 12px
    }

    .news-search-grid {
        grid-template-columns: 1fr;
        gap: .85rem
    }

    .faq-search-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .85rem
    }

    .faq-item__button {
        min-height: 3.5rem;
        padding: .85rem 1rem;
        gap: .65rem
    }

    .faq-item__answer {
        padding: .9rem 1rem 1rem;
        gap: .65rem
    }

    .news-search-field--date {
        grid-column: auto
    }

    .news-date-range {
        grid-template-columns: 1fr;
        gap: .35rem
    }

    .news-date-range > span {
        text-align: center
    }

    .news-article__meta {
        grid-template-columns: 1fr;
        gap: 0
    }

    .news-article__meta div,
    .news-article__meta div:nth-child(odd) {
        border-top: 1px solid #e0d9d4;
        border-left: 0
    }

    .news-article__meta div:first-child {
        border-top: 0
    }

    .news-article__body {
        min-height: 7rem;
        padding: 1rem
    }

    .plan-card {
        min-height: 6rem;
        padding: 1.25rem 1rem
    }

    .plan-detail-header {
        margin-bottom: 1rem;
        padding-bottom: .5rem
    }

    .plan-detail-header .page-header {
        padding: .25rem 0 .85rem
    }

    .plan-local-nav {
        grid-template-columns: 1fr;
        margin-bottom: 0
    }

    .plan-local-nav__group {
        padding: .65rem 0;
        border-top: 1px solid #ddd;
        border-left: 0
    }

    .plan-local-nav__group:first-child {
        border-top: 0
    }

    .plan-local-nav ul,
    .plan-local-nav__group--plan ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25rem
    }

    .plan-local-nav__group--plan ul {
        grid-template-rows: repeat(3, minmax(2.75rem, auto));
        grid-auto-flow: column
    }

    .plan-local-nav a {
        min-height: 2.75rem;
        padding: .5rem .65rem .5rem 1.75rem;
        border-radius: 12px
    }

    .detail-section__header {
        gap: .6rem;
        min-height: 3rem;
        padding: .35rem .5rem .35rem 1rem;
        border-radius: 12px 12px 0 0
    }

    .detail-section__title {
        font-size: 1.25rem
    }

    .detail-section__title-actions {
        flex-basis: min(8.5rem, 42%);
        min-height: 2.5rem
    }

    .detail-section__title-button {
        min-height: 2.5rem;
        font-size: 1rem
    }

    .detail-section__body {
        padding: .5rem 0 0;
        border-radius: 0
    }

    .detail-list {
        box-shadow: 0 3px 10px rgba(0, 0, 0, .14)
    }

    .detail-list dt,
    .detail-list dd {
        padding-right: .85rem;
        padding-left: .85rem
    }

    .detail-rich-text ul,
    .detail-content-list {
        padding-left: 1.25rem
    }

    .course-table caption {
        padding: 0 .25rem;
        font-size: .95rem
    }

    .course-table th,
    .course-table td {
        padding: .5rem .7rem
    }

    .organizer-search-panel {
        padding: 1rem;
        border-radius: 0 0 12px 12px
    }

    .organizer-search-grid {
        grid-template-columns: 1fr;
        gap: .85rem
    }

    .organizer-search-actions .btn {
        width: 100%
    }

    .unit-content-panel {
        padding: 1rem
    }

    .unit-back-actions .btn {
        width: 100%
    }

    .result-pagination {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .result-pagination__status {
        grid-column: 1 / -1;
        grid-row: 1
    }

    .detail-actions .btn-primary {
        width: 100%
    }

    .programs {
        grid-template-columns: 1fr
    }

    .topbar {
        gap: .65rem
    }
}

/* ===================================================================
   和諧化：讓 Bootstrap 功能頁的既有內容 class 也套設計師暖色（palette:
   primary #aa4b8f / accent #ff735d / bg #fff8ec）。只碰內容元件，不動版面結構。
   =================================================================== */

/* 內容區留白與可讀連結 */
.container-fluid .content { color: #40332f; }
.container-fluid .content a:not(.btn):not(.plan-card):not(.news-tab):not(.w3-button) { color: #185fa5; }
.container-fluid .content a:not(.btn):hover { color: #aa4b8f; }

/* 麵包屑 */
.breadlink { color:#746961; font-size:.95em; margin:.8rem 0; }
.breadlink a { color:#8f3c78; }

/* 區段標題列（.main-title + titlebar-*）→ 設計師酒紅漸層白字 */
.main-title, h2.main-title, h3.main-title {
    background: linear-gradient(90deg,#8F294D,#C44B54 55%,#FF9B57) !important;
    color:#fff !important; border:none !important; border-radius:.8rem;
    padding:.7rem 1.1rem !important; text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.titlebar-blue, .titlebar-yellow, .titlebar-green, .titlebar-pinky, .titlebar-orange {
    background: linear-gradient(90deg,#8F294D,#C44B54 55%,#FF9B57) !important;
    border-bottom:none !important;
}
.main-more, .main-title a.main-more {
    background:#fff !important; color:#8f3c78 !important; border-radius:1rem !important; padding:2px 14px !important;
}

/* 按鈕 */
.btn-search, .btn.btn-search, .btn-primary {
    background:#aa4b8f !important; color:#fff !important; border:none !important;
    border-radius:1.4rem !important; padding:.5rem 1.6rem !important; box-shadow:0 4px 12px rgba(170,75,143,.22);
}
.btn-search:hover, .btn-primary:hover { background:#8f3c78 !important; color:#fff !important; }
.btn-search-org { background:#ff735d !important; color:#fff !important; border:none !important; border-radius:1.4rem !important; }

/* 查詢卡 */
.index-search {
    background:#fff; border:1px solid #e7dccf; border-radius:1.2rem;
    box-shadow:0 8px 24px rgba(128,82,47,.10); padding:1.2rem 1.4rem; margin-bottom:1.2rem;
}

/* 表單控件 */
.form-label-search { background:#fbf2ec !important; color:#5a3a2f !important; border-radius:.4rem; }
.form-control { border-radius:.4rem !important; border:1px solid #cdbfae; box-shadow:none; }
.form-control:focus { border-color:#aa4b8f; box-shadow:0 0 0 3px rgba(170,75,143,.14); }

/* 清單表格 */
.table-newsList, .table-index { border-radius:.6rem; overflow:hidden; }
.table-newsList thead th, .table-index thead th {
    background:#89304f !important; color:#fff !important; text-align:center; padding:.7rem .6rem;
}
.table-newsList tbody tr:nth-child(even), .table-index tbody tr:nth-child(even) { background:#f7f1ea; }
.table-newsList tbody tr:hover, .table-index tbody tr:hover { background:#ffe3c7; }
.table-newsList td, .table-index td { padding:.6rem; border-bottom:1px solid #efe4d6; }
.table-index a, .table-newsList a { color:#8f3c78; }

/* 計畫功能導覽（plan-nav-a / plan-nav-min） */
.plan-nav-a, .plan-nav-min { list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; padding:0; }
.plan-nav-a li a, .plan-nav-min li a {
    display:inline-block; background:#fff; border:1px solid #e2b98d; color:#8f3c78;
    border-radius:1.2rem; padding:.4rem 1.1rem; text-decoration:none;
}
.plan-nav-a li a:hover, .plan-nav-min li a:hover { background:#aa4b8f; color:#fff; }

/* 回頁首 / 回上頁 */
.goup a, .page-back a, .page-back button {
    color:#8f3c78; background:transparent; border:1px solid #e2b98d; border-radius:1.2rem; padding:.35rem 1rem; text-decoration:none;
}
.goup a:hover, .page-back a:hover, .page-back button:hover { background:#aa4b8f; color:#fff; }

/* w3 側欄計畫鈕（若功能頁仍用） */
.w3-teal, .w3-button.w3-teal { background:#aa4b8f !important; color:#fff !important; }

/* 內容標題 */
.content-title { color:#8F294D; }
.newsDate { color:#746961; }

/* 隱藏功能頁內容中的臉書/推特社群分享小工具（與設計版頭一致：不放社群圖示） */
.header-tab6, .header-tab, .header-tab5 { display:none !important; }
/* 避免空的區段標題列變成一小塊漸層 */
.main-title:empty, .titlebar-blue:empty, .titlebar-yellow:empty, .titlebar-green:empty, .titlebar-pinky:empty { display:none !important; }

/* ===================================================================
   計畫簡介 / 各計畫 landing / 計畫內容頁 內容和諧化（page-planTitle / 分頁 /
   tab-content / plan-nav-min / table-content）：橘色內容框、滿版、分頁膠囊。
   =================================================================== */
.page-planTitle {
    display: flex; align-items: center; gap: .6rem;
    color: #B12D2B; font-size: 1.55rem; font-weight: 700; margin: 1rem 0 1.1rem;
}
.page-planTitle img { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; }

/* 分頁列（pill / section tabs） */
.plan-sec-nav { border-bottom: 2px solid #F0C98A; margin: 0 0 -1px; padding: 0; }
.plan-sec-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.plan-sec-nav li { list-style: none; }
.plan-sec-nav li a {
    display: inline-block; padding: .7rem 1.4rem; border-radius: .9rem .9rem 0 0;
    background: #fff; border: 1px solid #F0C98A; border-bottom: none;
    color: #8f3c78; text-decoration: none; font-weight: 700;
}
.plan-sec-nav li a:hover { background: #FFF1DC; }
.plan-sec-nav li.active a, .plan-sec-nav li a.active {
    background: linear-gradient(90deg, #E8821E, #F5A623); color: #fff; border-color: #E8821E;
}

/* 內容框：橘色卡片、滿版 */
.tab-content {
    background: #FFF4E8; border: 1px solid #F0C98A; border-top: none;
    border-radius: 0 0 1rem 1rem; padding: 1.4rem 1.6rem; width: 100%;
}
.tab-pane { width: 100%; }
.tab-content img, .tab-pane img { max-width: 100%; height: auto; }
.tab-content iframe { width: 100%; max-width: 100%; border: 0; min-height: 480px; }
.tabcontent { background: #FFF4E8; border: 1px solid #F0C98A; border-radius: 1rem; padding: 1.4rem 1.6rem; width: 100%; }

/* 內容用途的 index-search 改暖色卡 */
.index-search { background: #FFF7EF !important; border: 1px solid #F0C98A !important; }

/* 子功能導覽 plan-nav-min（膠囊，同 plan-nav-a） */
.plan-nav-min { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: .8rem 0; }
.plan-nav-min li { list-style: none; }
.plan-nav-min li a {
    display: inline-block; background: #fff; border: 1px solid #e2b98d; color: #8f3c78;
    border-radius: 1.2rem; padding: .45rem 1.2rem; text-decoration: none;
}
.plan-nav-min li a:hover { background: #aa4b8f; color: #fff; }

/* 計畫內容/單位基本資料 詳細表 .table-content */
.table-content { width: 100%; border-collapse: collapse; background: #fff; border-radius: .6rem; overflow: hidden; }
.table-content caption.titlecol, .table-content .titlecol {
    background: linear-gradient(90deg, #8F294D, #C44B54 55%, #FF9B57); color: #fff;
    text-align: left; padding: .7rem 1rem; font-weight: 700;
}
.table-content th.bluecol, .table-content .bluecol {
    background: #FBE9D5; color: #5a3a2f; text-align: right; padding: .6rem 1rem; width: 14rem; border-bottom: 1px solid #f0ddc4;
}
.table-content td.whitecol, .table-content .whitecol {
    background: #fff; padding: .6rem 1rem; border-bottom: 1px solid #f0ddc4; text-align: left;
}

/* ---- 追加微調：移除計畫標題大 icon、美化分頁內容 h3、plan-nav-min 改暖色並與 IndexP4 一致 ---- */
.page-planTitle img { display: none !important; }

.tabcontent h3, .tab-content h3 {
    color: #B12D2B; font-size: 1.2rem; font-weight: 700;
    border-left: 5px solid #E8821E; padding: .1rem 0 .1rem .8rem; margin: 0 0 1.1rem; line-height: 1.4;
}

/* plan-nav-min：蓋掉 base.css 的淺藍/淺綠底與 25% 浮動，改暖色卡＋與 .plan-nav-a 一致的膠囊 */
ul.plan-nav-min {
    background: #FFF4E8 !important;
    background-image: none !important;
    border: 1px solid #F0C98A;
    border-radius: 1rem;
    padding: 1rem !important;
    margin: .8rem 0;
    display: flex; flex-wrap: wrap; gap: .6rem;
    overflow: visible !important;
}
ul.plan-nav-min li {
    width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; list-style: none;
}
ul.plan-nav-min li a {
    display: inline-block !important; width: auto !important;
    background: #fff !important; border: 1px solid #e2b98d !important; color: #8f3c78 !important;
    border-radius: 1.2rem !important; padding: .45rem 1.2rem !important;
    text-align: center; text-decoration: none;
}
ul.plan-nav-min li a:hover, ul.plan-nav-min li a.active {
    background: #aa4b8f !important; color: #fff !important; border-color: #aa4b8f !important;
}

/* ===================================================================
   頁尾各計畫快速連結（#intro.footer-plan-menu.programs）在 Bootstrap 功能頁
   的修正。兩個問題：
   (1) Bootstrap 的 .container::before/::after（clearfix，display:table）會在
       display:grid 的 .programs 內變成「空的 grid item」，把各計畫欄整排往右
       擠一格、其餘欄換行 → 用 content:none 移除該偽元素（.programs::after 的
       白色延伸另有定義，需保留，故只針對 ::before，且 ::after 以本檔既有絕對
       定位規則覆蓋 Bootstrap 版本）。
   (2) 卡片標題膠囊、置中連結樣式原在 style.css（功能頁未載入）→ 於此補上，
       讓功能頁頁尾與設計頁一致。
   =================================================================== */
.footer-plan-menu.programs::before { content: none; }

/* 寬度比照設計頁的 .container（Bootstrap 版 .container 會給不同寬度、且最右欄被切） */
.footer-plan-menu.programs {
    width: min(1200px, calc(100% - 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.footer-plan-menu.programs .program-card h3 {
    margin: 0 0 .45rem;
    padding: .15rem .75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: #40332f;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}
.footer-plan-menu.programs .program-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-plan-menu.programs .program-card li {
    margin: .35rem 0;
    color: #5f534d;
    text-align: center;
}
.footer-plan-menu.programs .program-card li a {
    display: block;
    padding: .15rem .75rem;
    border-radius: 999px;
    color: #333;
    text-decoration: none;
    background: transparent;
    line-height: 1.45;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.footer-plan-menu.programs .program-card li a:hover,
.footer-plan-menu.programs .program-card li a:focus-visible {
    background: #FEE8DC;
    color: #222;
    text-decoration: none;
    box-shadow: inset 0 5px 7px -5px rgba(51, 51, 51, .55);
}

/* ===================================================================
   明細／表單表格 統一暖色（履歷維護 YR003、報名明細 YR002/Detail、
   學員相關文件 YR006、雙週誌 YR013…）。把 redcol/bluecol/whitecol/titlecol/
   table-content2/tblist 全部對齊既有 .table-content 的暖色風格，取代 base.css 的舊藍色。
   =================================================================== */
.table-content, .table-content2 {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #f0ddc4;
    border-radius: .6rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* 區段標題列（maroon 漸層白字） */
.titlecol, caption.titlecol, th.titlecol,
.table-content2 th.redcol[colspan], .table-content2 th.bluecol[colspan] {
    background: linear-gradient(90deg, #8F294D, #C44B54 55%, #FF9B57) !important;
    color: #fff !important;
    text-align: left !important;
    padding: .7rem 1rem !important;
    font-weight: 700;
    border: none !important;
}

/* 標籤欄（藍/紅欄）→ 暖色淺褐底 */
.bluecol, th.bluecol, .redcol, th.redcol {
    background: #FBE9D5 !important;
    color: #5a3a2f !important;
    text-align: right;
    padding: .6rem 1rem;
    border-bottom: 1px solid #f0ddc4;
    font-weight: 700;
    vertical-align: middle;
}
.redcol, th.redcol { color: #a2324e !important; }  /* 必填欄以紅字提示 */

/* 內容欄 */
.whitecol, td.whitecol {
    background: #fff !important;
    color: #40332f;
    padding: .6rem 1rem;
    border-bottom: 1px solid #f0ddc4;
    text-align: left;
    vertical-align: middle;
}

/* 表單控件在暖色表格內：圓角、暖色 focus */
.table-content2 .form-control, .table-content2 input[type="text"], .table-content2 textarea, .table-content2 select {
    border: 1px solid #e0cbb0;
    border-radius: .5rem;
}
.table-content2 .form-control:focus, .table-content2 input:focus, .table-content2 textarea:focus, .table-content2 select:focus {
    border-color: #E8821E;
    box-shadow: 0 0 0 3px rgba(232, 130, 30, .16);
    outline: none;
}

/* 明細清單（tblist：如 YR002/Detail「訓練內容」）比照「訓練計畫」maroon 標題＋格線 */
.tblist-title {
    background: linear-gradient(90deg, #8F294D, #C44B54 55%, #FF9B57);
    color: #fff !important;
    padding: .6rem 1rem;
    margin: 1.2rem 0 0;
    border-radius: .6rem .6rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
}

/* 明細表格內：橫跨整列的區段標籤（如週誌「職場導師評語」「學校評語」等）置中 */
.table-content td.bluecol[colspan],
.table-content td.redcol[colspan],
.table-content2 td.bluecol[colspan],
.table-content2 td.redcol[colspan] {
    text-align: center !important;
}
.tblist-title + .tblist { border-radius: 0 0 .6rem .6rem; }
.tblist {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #f0ddc4;
}
/* tblist 直接以第一列 th 當表頭（無 thead）時的暖色表頭 */
.tblist > tbody > tr:first-child > th,
.tblist > tr:first-child > th,
.tblist thead th {
    background: #89304f;
    color: #fff;
    padding: .6rem .7rem;
    text-align: center;
    border: 1px solid #efe4d6;
    font-weight: 700;
}
.tblist td {
    padding: .55rem .7rem;
    border: 1px solid #efe4d6;
    background: #fff;
    vertical-align: middle;
}
.tblist > tbody > tr:nth-child(even) td { background: #faf4ec; }

/* 學員相關文件（YR006）下載清單 → 檔案卡片＋格式膠囊按鈕 */
.doc-dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.2rem 0;
}
.doc-dl > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin: 0;
    padding: 1rem 1.3rem;
    list-style: none;
    background: #FFF7EF;
    border: 1px solid #F0C98A;
    border-radius: .9rem;
}
.doc-dl > ul > li { display: inline-flex !important; align-items: center; margin: 0; }
.doc-dl > ul > li:first-child {
    margin-right: auto;
    font-weight: 700;
    font-size: 1.08rem;
    color: #8F294D;
}
.doc-dl > ul > li a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .95rem;
    border: 1px solid #e2b98d;
    border-radius: 1.4rem;
    background: #fff;
    color: #8f3c78;
    text-decoration: none;
    font-weight: 600;
}
.doc-dl > ul > li a:hover { background: #aa4b8f; color: #fff; border-color: #aa4b8f; }
.doc-dl > ul > li a img { width: 22px; height: 22px; }
.doc-dl > ul > li a span { font-size: .95rem !important; }

/* ===================================================================
   線上切結書（YR012）：正式公文紙張卡 + 橘色套印按鈕
   =================================================================== */
.affidavit-doc {
    background: #fff;
    border: 1px solid #e6d6c2;
    border-radius: .5rem;
    box-shadow: 0 12px 34px rgba(128, 82, 47, .14);
    max-width: 900px;
    margin: 1.4rem auto;
    padding: 2.6rem 3rem;
    position: relative;
}
.affidavit-doc::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid #e3d3bf;
    border-radius: .35rem;
    pointer-events: none;
}
.affidavit-doc > * { position: relative; z-index: 1; }
.affidavit-doc__title {
    text-align: center;
    font-size: 1.7rem;
    letter-spacing: .1em;
    color: #40332f;
    margin: 0 0 1.6rem;
    padding-bottom: .8rem;
    border-bottom: 2px solid #C44B54;
    line-height: 1.5;
    font-weight: bold;
}
.affidavit-doc__title p, .affidavit-doc__title span { font-size: inherit !important; }
.affidavit-doc td { font-size: 1.05rem !important; line-height: 1.9 !important; }
.affidavit-doc [style*="16pt"] { font-size: 1.02rem !important; line-height: 1.9 !important; }
.affidavit-doc [style*="left: 15%"], .affidavit-doc [style*="left:15%"] { left: 0 !important; width: 100% !important; }

.btn-print-orange {
    background: linear-gradient(180deg, #F5A623, #E8821E) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 1.4rem !important;
    padding: .5rem 1.4rem !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(232, 130, 30, .28);
}
.btn-print-orange:hover, .btn-print-orange:focus {
    background: linear-gradient(180deg, #E8821E, #d1731a) !important;
    color: #fff !important;
}

/* ===================================================================
   手機板：明細/問卷頁 .table-content 改上下堆疊（RWD）。
   以 --stack 標記類別限定套用範圍（目前為大專就業學程相關頁面：
   YR013/Detail、EL004、EL005、eLearnComApply/CorpDetail），
   其他計畫要套用時，只需在該表格加上 table-content--stack 即可。
   =================================================================== */
@media (max-width: 768px) {
    .table-content--stack,
    .table-content--stack > tbody,
    .table-content--stack > tbody > tr,
    .table-content--stack > tr {
        display: block;
        width: 100%;
    }
    /* 純表頭列（整列都是 th，如「面向／項目／說明」）在堆疊後會變成數條無意義標籤，隱藏之。
       注意：欄位標籤型的 th（與 td 成對，如帳號申請頁的「合作廠商名稱」）必須保留，
       故以「有 th 但沒有 td」的列為條件精準篩選。 */
    .table-content--stack > thead,
    .table-content--stack > tbody > tr:has(> th):not(:has(> td)),
    .table-content--stack > tr:has(> th):not(:has(> td)) { display: none; }
    .table-content--stack > tbody > tr > th:empty,
    .table-content--stack > tr > th:empty { display: none; }

    .table-content--stack > tbody > tr > th,
    .table-content--stack > tbody > tr > td,
    .table-content--stack > tr > th,
    .table-content--stack > tr > td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        box-sizing: border-box;
        white-space: normal;
        word-break: break-word;
    }
    /* 每一列（tr）視覺上成為一張卡片 */
    .table-content--stack > tbody > tr,
    .table-content--stack > tr {
        margin-bottom: .9rem;
        border: 1px solid #F0C98A;
        border-radius: .7rem;
        overflow: hidden;
        background: #fff;
    }
    .table-content--stack .bluecol,
    .table-content--stack .redcol { border-bottom: 0; font-weight: 700; }
    .table-content--stack .whitecol { border-top: 0; }

    /* 表單元件滿版，避免固定 cols/size 造成水平溢出 */
    .table-content--stack .form-control,
    .table-content--stack input[type="text"],
    .table-content--stack select,
    .table-content--stack textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: .3rem;
        box-sizing: border-box;
    }
    /* 選項（單選/複選）改直式排列，觸控更好按 */
    .table-content--stack .radioset .col-sm-2,
    .table-content--stack .radioset .col-sm-4,
    .table-content--stack .radioset .col-sm-6,
    .table-content--stack .radioset .col-sm-12,
    .table-content--stack td > .col-sm-2,
    .table-content--stack td > .col-sm-4,
    .table-content--stack td > .col-sm-6,
    .table-content--stack td > .col-sm-12 {
        width: 100% !important;
        float: none !important;
        padding-left: .5rem !important;
    }
    .table-content--stack .radioset label { display: inline-block; margin: .15rem .8rem .15rem 0; }

    /* 手機可用寬度救回：外層 container / col-sm-12 / plan-content 的左右 padding 層層相加，
       375px 下內容只剩約 228px。用 :has() 僅針對含 --stack 表格的頁面收斂，不影響其他頁。 */
    .container:has(.table-content--stack),
    .col-sm-12:has(.table-content--stack) {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: auto !important;
    }
    .plan-content:has(.table-content--stack),
    .table-responsive:has(.table-content--stack),
    .index-search:has(.table-content--stack) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 帳號申請頁多一層 tabpanel/tab-content（左右各 25.6px） */
    .tab-content:has(.table-content--stack) {
        padding-left: .4rem !important;
        padding-right: .4rem !important;
    }
}

/* ===================================================================
   手機板：履歷維護（YR003）等 .table-content2 表單不爆版（標籤/輸入改上下堆疊，
   內嵌明細表水平捲動）
   =================================================================== */
@media (max-width: 768px) {
    .table-content2,
    .table-content2 > tbody,
    .table-content2 > tbody > tr,
    .table-content2 > tr {
        display: block;
        width: 100%;
    }
    .table-content2 > tbody > tr > th,
    .table-content2 > tbody > tr > td,
    .table-content2 > tr > th,
    .table-content2 > tr > td {
        display: block;
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box;
    }
    .table-content2 th.bluecol, .table-content2 th.redcol { border-bottom: 0; }
    .table-content2 td.whitecol { border-top: 0; }
    .table-content2 .form-control,
    .table-content2 input[type="text"],
    .table-content2 select,
    .table-content2 textarea {
        width: 100% !important;
        margin-bottom: .3rem;
    }
    /* 學歷/工作經歷 內嵌明細表：改「卡片式」RWD（不水平捲動） */
    #tbEdu, #tbEdu > tbody, #tbWork, #tbWork > tbody { display: block; width: 100%; }
    #tbEdu > thead, #tbWork > thead { display: none; }
    #tbEdu > tbody > tr, #tbWork > tbody > tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #F0C98A;
        border-radius: .7rem;
        overflow: hidden;
        background: #fff;
        white-space: normal;
    }
    #tbEdu > tbody > tr > td, #tbWork > tbody > tr > td {
        display: block;
        width: 100% !important;
        border: 0;
        border-bottom: 1px solid #f2e6d5;
        padding: .55rem .85rem;
        text-align: left !important;
    }
    #tbEdu > tbody > tr > td:last-child, #tbWork > tbody > tr > td:last-child { border-bottom: 0; text-align: right !important; }
    #tbEdu > tbody > tr > td::before, #tbWork > tbody > tr > td::before {
        content: "";
        display: block;
        margin-bottom: .25rem;
        font-weight: 700;
        font-size: .82rem;
        color: #8f3c78;
    }
    /* 用欄位順序對應表頭名稱（免改 markup） */
    #tbEdu > tbody > tr > td:nth-child(1)::before { content: "學校名稱"; }
    #tbEdu > tbody > tr > td:nth-child(2)::before { content: "主修科系"; }
    #tbEdu > tbody > tr > td:nth-child(3)::before { content: "學位"; }
    #tbEdu > tbody > tr > td:nth-child(4)::before { content: "畢業狀況"; }
    #tbEdu > tbody > tr > td:nth-child(5)::before { content: "修業期間－始"; }
    #tbEdu > tbody > tr > td:nth-child(6)::before { content: "修業期間－迄"; }
    #tbEdu > tbody > tr > td:nth-child(7)::before { content: "\00a0"; }
    #tbWork > tbody > tr > td:nth-child(1)::before { content: "服務單位"; }
    #tbWork > tbody > tr > td:nth-child(2)::before { content: "職稱"; }
    #tbWork > tbody > tr > td:nth-child(3)::before { content: "工作期間－始"; }
    #tbWork > tbody > tr > td:nth-child(4)::before { content: "工作期間－迄"; }
    #tbWork > tbody > tr > td:nth-child(5)::before { content: "年資"; }
    #tbWork > tbody > tr > td:nth-child(6)::before { content: "工作內容"; }
    #tbWork > tbody > tr > td:nth-child(7)::before { content: "\00a0"; }
    /* 卡片內輸入框：一般欄滿版；年/月/年資 等短欄維持窄小並排 */
    #tbEdu input[type="text"], #tbEdu select, #tbWork input[type="text"], #tbWork select {
        width: 100% !important; max-width: 100%; margin: .1rem 0; box-sizing: border-box;
    }
    #tbEdu > tbody > tr > td:nth-child(5) input, #tbEdu > tbody > tr > td:nth-child(6) input,
    #tbWork > tbody > tr > td:nth-child(3) input, #tbWork > tbody > tr > td:nth-child(4) input,
    #tbWork > tbody > tr > td:nth-child(5) input {
        width: 4.2rem !important; display: inline-block;
    }
    /* 主容器留白縮小 */
    .container .index-search, .container .plan-content { padding-left: .6rem; padding-right: .6rem; }
}

/* 問卷表格（EL006 等）的表頭列：原本藍色 → 改暖橘（淺橘漸層白字），淺褐標籤欄與白內容欄不變 */
.table-content th:not(.bluecol):not(.redcol):not(.whitecol):not(.titlecol) {
    background: linear-gradient(180deg, #F6A94C, #E8821E);
    color: #fff;
    padding: .6rem .8rem;
    text-align: center;
    border: 1px solid #f0ddc4;
    font-weight: 700;
}

/* YR003 履歷表 width:100% 卻仍超出 .table-responsive 的原因：auto table-layout 會以
   儲存格 intrinsic min-width（textarea cols=70、內嵌 7 欄明細表、sized input）撐大表格，
   忽略 width:100%。改 table-layout:fixed 讓欄寬照容器 100% 分配、內容自動收斂，
   並約束子元素 box-sizing/max-width 不撐寬 → 不再水平溢出。 */
.table-content2 {
    table-layout: fixed;
    width: 100%;
}
.table-content2 th, .table-content2 td {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.table-content2 input[type="text"],
.table-content2 select {
    max-width: 100%;
    box-sizing: border-box;
}
.table-content2 textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* 內嵌學歷/工作經歷明細表也固定版面，避免 7 欄撐破（僅限 YR003 內嵌，不動全站清單表） */
.table-content2 .table-newsList {
    table-layout: fixed;
    width: 100%;
}
.table-content2 .table-newsList input[type="text"],
.table-content2 .table-newsList select {
    max-width: 100%;
    box-sizing: border-box;
}

/* ===================================================================
   相關連結（eLink）→ 響應式連結卡片
   =================================================================== */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1rem 0 2.2rem;
}
.link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    padding: 1.2rem 1rem;
    background: #fff;
    border: 1px solid #F0C98A;
    border-radius: .9rem;
    text-decoration: none;
    color: #5a3a2f;
    box-shadow: 0 4px 14px rgba(128, 82, 47, .08);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.link-card:hover, .link-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(128, 82, 47, .16);
    border-color: #E8821E;
    color: #8f3c78;
    text-decoration: none;
}
.link-card__logo {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.link-card__logo img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
}
.link-card__name {
    font-weight: 700;
    text-align: center;
    font-size: .98rem;
    line-height: 1.4;
}

/* ===================================================================
   功能頁「查詢條件」區塊（.index-search）比照首頁綜合查詢的 2 欄暖色版面。
   採「加 qsearch 類別才啟用」的 opt-in 方式：.index-search 全站 90 個頁面共用
   （含登入/帳號/問卷等單欄表單），故不可全域改 2 欄；只在查詢頁的 .index-search
   加 qsearch 類別即套用。欄位仍用原 helper，送出參數不變。
   多控件欄位（訓練職類/訓練地點…）加 qsearch-wide 讓其橫跨兩欄。
   =================================================================== */
.qsearch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 1.1rem 1.7rem;
    align-items: start;
}

/* qsearch 直接掛在 .index-search 卡片上時（欄位為卡片直屬子元素，如 YR002）補內距 */
.index-search.qsearch {
    padding: 1.6rem 1.8rem !important;
}

/* 非欄位內容（麵包屑/標題/導覽/按鈕列）→ 橫跨兩欄 */
.qsearch > .breadlink,
.qsearch > .page-planTitle,
.qsearch > h2,
.qsearch > h3,
.qsearch > .search-head,
.qsearch > ul.plan-nav-min,
.qsearch > .plan-sec-nav,
.qsearch > .text-center,
.qsearch > .form-actions,
.qsearch > .clearfix {
    grid-column: 1 / -1;
}

/* 綜合查詢（Search）上方標題＋分類頁籤：比照首頁 hero-search 的 search-tabs */
.search-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem 1.4rem;
    margin: 0 0 1.2rem;
}
.search-head__title {
    flex: 0 0 auto;
    margin: 0;
    color: #B12D2B;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.search-head__title span[lang="en"] { font-size: .72em; font-weight: 400; color: #a65c49; }
.search-head .search-tabs { flex: 1 1 24rem; min-width: 0; margin: 0; }
.search-tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.search-tabs__tabs { display: flex; flex-wrap: wrap; gap: .6rem; }
.search-tabs button, .search-tabs > a {
    border: 0;
    border-radius: 999px;
    padding: .55rem 1.3rem;
    font-size: 1rem;
    font-weight: 700;
    background: #fff;
    color: #a65c49;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(160, 120, 80, .1);
    border: 1px solid #f0d8bf;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.search-tabs .active { background: #b9472c; color: #fff; border-color: #b9472c; }
.search-tabs button:hover, .search-tabs > a:hover {
    color: #fff;
    background: #a93f27;
    border-color: #a93f27;
    box-shadow: 0 4px 12px rgba(232, 121, 92, .25);
}

/* 欄位：標題在上、控件在下，去掉條紋底 */
.qsearch > .form-group-search {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.qsearch > .form-group-search.qsearch-wide {
    grid-column: 1 / -1;
}

/* 自動偵測多控件欄位（如訓練職類/地點/縣市連動）→ 橫跨兩欄。
   :has 為漸進增強：現代瀏覽器自動生效（rollout 只需加 qsearch 類別，免手動標記）；
   IE11 不支援時忽略此規則，多控件欄位退回半欄內自動換行，仍可用。 */
.qsearch > .form-group-search:has(.form-control ~ .form-control),
.qsearch > .form-group-search:has(.input-group ~ .input-group) {
    grid-column: 1 / -1;
}

/* 指定維持單欄（覆蓋上面的自動滿版）：如 TrainingHistory「訓練期間」整併成一欄 */
.qsearch > .form-group-search.qsearch-narrow { grid-column: auto !important; }
.qsearch > .form-group-search.qsearch-narrow .hs-daterange { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.qsearch > .form-group-search.qsearch-narrow .datepicker-outline.input-group { flex: 1 1 8rem; min-width: 0; }

.qsearch .form-label-search {
    display: block;
    width: auto !important;
    text-align: left;
    background: transparent !important;
    color: #7a4a1e !important;
    font-weight: 700;
    padding: 0 !important;
    float: none !important;
}

.qsearch .form-input,
.qsearch .form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.qsearch .form-group-search .form-control {
    flex: 1 1 10rem;
    min-width: 0;
    width: auto;
    margin: 0;
    border: 1px solid #e0cbb0;
    border-radius: .7rem;
    padding: .6rem .8rem;
    background: #fff;
    box-shadow: none;
}

.qsearch .form-group-search .form-control:focus {
    border-color: #E8821E;
    box-shadow: 0 0 0 3px rgba(232, 130, 30, .18);
    outline: none;
}

/* radio / checkbox → 橫排膠囊（同首頁綜合查詢） */
.qsearch .form-group-search .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
}
.qsearch .form-group-search .radio,
.qsearch .form-group-search .checkbox {
    margin: 0;
}
.qsearch .form-group-search .radio label,
.qsearch .form-group-search .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: .5rem 1.1rem;
    border: 1px solid #e0cbb0;
    border-radius: 2rem;
    background: #fff;
    font-weight: 500;
    color: #5a3a2f;
    cursor: pointer;
}
.qsearch .form-group-search .radio label:hover,
.qsearch .form-group-search .checkbox label:hover {
    background: #fff2e6;
    border-color: #E8821E;
}
.qsearch .form-group-search .radio input {
    accent-color: #aa4b8f;
}

/* 日期元件：文字框 + 日曆鈕 一體化圓角、暖橘鈕（同首頁綜合查詢） */
.qsearch .datepicker-outline.input-group {
    flex: 1 1 12rem;
}
.qsearch .datepicker-outline.input-group .form-control {
    border-right: 0;
    border-radius: .7rem 0 0 .7rem;
}
.qsearch .datepicker-outline .open-datepicker {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.9rem;
    border: 1px solid #E8821E;
    border-left: 0;
    border-radius: 0 .7rem .7rem 0;
    background: linear-gradient(180deg, #F5A623, #E8821E);
    color: #fff;
}
.qsearch .datepicker-outline .open-datepicker:hover,
.qsearch .datepicker-outline .open-datepicker:focus {
    background: linear-gradient(180deg, #E8821E, #d1731a);
    color: #fff;
}

/* 送出按鈕：置中紫色漸層大膠囊（沿用 .btn-search 的漸層色） */
.qsearch > .text-center {
    display: flex;
    justify-content: center;
    margin-top: .4rem;
}

.qsearch > .text-center .btn-search,
.qsearch > .text-center .btn {
    min-width: 16rem;
    border-radius: 2rem !important;
    padding: .8rem 2.4rem !important;
    font-size: 1.05rem;
    font-weight: 700;
}

@media (max-width: 720px) {
    .qsearch {
        grid-template-columns: 1fr;
    }
    .qsearch > .form-group-search.qsearch-wide {
        grid-column: auto;
    }
}