/* ==========================================================
   活動詳情（Views/Shared/_Activity.cshtml、Views/Activities/Details.cshtml）
   核可樣稿：方向 B「右側票券式報名卡」
   斷點：< 992 手機／平板單欄（精簡票券卡＋底部固定報名列）；>= 992 桌機兩欄（右欄 360px 票券卡）
   色彩值與 Content/ActivityList.css 的 --ya-* token 相同；類別一律 ad- 前綴
   ========================================================== */

/* ---------- 1. 變數 ---------- */
.act-page,
.act-activity {
    --act-primary: #03857D;
    --act-bg: #F6F9F9;
    --act-text: #1F2933;
    --act-muted: #5B6770;
    --act-dark: #0A5652;
    --act-tint: #E6F2F1;
    --act-sub: #3E5B58;
    --act-line: #DCE5E4;
    --act-divider: #EDF1F1;
    --act-focus: #0B6E79;
    --act-ok: #1E8E3E;
    --act-ok-bg: #E7F4EA;
    --act-ok-text: #17722F;
    --act-warn: #E0A030;
    --act-warn-bg: #FFF4E0;
    --act-warn-text: #8F5400;
    --act-urgent: #9A5B00;
    --act-grey: #6B7280;
    --act-grey-bg: #EEF0F2;
    --act-grey-text: #5B6470;
    --act-dash: #A7B1B6;
}

/* 只有活動詳情頁改用與首頁列表相同的平面淺底；不支援 :has() 的瀏覽器維持原本漸層底 */
body:has(.act-page) {
    background: #F6F9F9;
}

.act-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: var(--act-text);
}

/* 手機底部固定報名列的高度＋安全區，頁尾預留同高，避免最後內容被遮住 */
.act-page--cta {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* 有底部固定報名列的頁面：鍵盤移動焦點時捲動位置預留同高，焦點不會藏在報名列下方 */
@media (max-width: 991.98px) {
    html:has(.act-page--cta) {
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }
}

.act-activity {
    color: var(--act-text);
    -webkit-font-smoothing: antialiased;
}

.act-activity p,
.act-activity h1,
.act-activity h2,
.act-activity h3,
.act-page .act-card-title {
    margin: 0;
}

.act-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;
}

.act-icon {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
}

.act-icon--sm {
    width: 16px;
    height: 16px;
}

.act-icon--xs {
    width: 13px;
    height: 13px;
}

.act-page a:focus,
.act-activity a:focus,
.act-activity summary:focus {
    outline: 2px solid var(--act-focus);
    outline-offset: 2px;
}

.act-page a:focus:not(:focus-visible),
.act-activity a:focus:not(:focus-visible),
.act-activity summary:focus:not(:focus-visible) {
    outline: none;
}

/* ---------- 2. 頂列：桌機麵包屑＋管理者工具列；手機返回列＋「管理」選單 ---------- */
.act-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-height: 48px;
    margin: -8px 0 4px;
}

.act-crumb {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--act-muted);
}

.act-crumb a,
.act-crumb a:visited {
    color: var(--act-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(10, 86, 82, .35);
    text-underline-offset: 3px;
}

.act-crumb [aria-current] {
    color: var(--act-text);
}

.act-back,
.act-back:visited {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    margin-left: -6px;
    padding: 0 10px 0 4px;
    color: var(--act-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.act-back:hover {
    color: var(--act-dark);
    text-decoration: underline;
}

.act-back .act-icon {
    width: 22px;
    height: 22px;
}

/* 桌機工具列 */
.act-admin {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 4px 12px;
    border: 1px dashed var(--act-dash);
    border-radius: 10px;
    background: #fff;
}

.act-admin-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 6px;
    color: var(--act-muted);
    font-size: 12px;
    white-space: nowrap;
}

.act-admin-tag .act-icon {
    width: 14px;
    height: 14px;
}

.act-admin-link,
.act-admin-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--act-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.act-admin-link:hover {
    background: var(--act-tint);
    color: var(--act-dark);
    text-decoration: none;
}

.act-admin-link + .act-admin-link {
    border-left: 1px solid var(--act-divider);
    border-radius: 0 7px 7px 0;
}

.act-admin-count {
    padding: 0 7px;
    border-radius: 9px;
    background: var(--act-tint);
    color: var(--act-dark);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 手機「管理」選單（details／summary，不需 JS） */
.act-admin-m {
    position: relative;
    flex: none;
}

.act-admin-m-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px dashed var(--act-dash);
    border-radius: 10px;
    background: #fff;
    color: var(--act-dark);
    font-size: 14px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.act-admin-m-btn::-webkit-details-marker {
    display: none;
}

.act-admin-m-btn::marker {
    content: "";
}

.act-admin-m-btn small {
    color: var(--act-muted);
    font-size: 11px;
    font-weight: 400;
}

.act-admin-m[open] .act-admin-m-btn {
    border-style: solid;
    border-color: var(--act-primary);
}

.act-admin-m-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1010;
    min-width: 188px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--act-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(10, 86, 82, .16);
    list-style: none;
}

.act-admin-m-menu a,
.act-admin-m-menu a:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 7px;
    color: var(--act-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.act-admin-m-menu a:hover {
    background: var(--act-tint);
    color: var(--act-dark);
}

/* ---------- 3. 版面：手機單欄，DOM 順序即閱讀順序 ---------- */
.act-layout {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 手機：票券卡、報名須知與承辦資訊卡各自成為版面中的一列（排在標題後、活動內容前） */
.act-side,
.act-ticket {
    display: contents;
}

.act-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ---------- 4. 標題區 ---------- */
.act-head {
    min-width: 0;
}

.act-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.act-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 2px 10px;
    border-radius: 13px;
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.act-badge--class {
    background: var(--act-tint);
    color: var(--act-dark);
}

.act-badge--muted {
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
}

.act-reject {
    margin-top: 10px !important;
    padding: 8px 12px;
    border-left: 4px solid #B42318;
    border-radius: 6px;
    background: #FDECEA;
    color: #7A1A10;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.act-title {
    margin-top: 10px !important;
    color: var(--act-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.act-speaker {
    margin-top: 6px !important;
    color: var(--act-text);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.act-speaker-k {
    margin-right: 8px;
    color: var(--act-muted);
    font-size: 13px;
}

/* ---------- 5. 票券卡 ---------- */
.act-tk-card {
    min-width: 0;
    border: 1px solid var(--act-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(10, 86, 82, .08);
}

.act-tk-top {
    padding: 14px 16px 12px;
    border-top: 4px solid var(--act-primary);
    border-radius: 14px 14px 0 0;
}

.act-tk-when {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 日期塊：沿用 .ya-dateblock 語彙放大，主色實心 */
.act-db {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 64px;
    min-height: 70px;
    padding: 7px 2px 8px;
    border: 1px solid var(--act-primary);
    border-radius: 10px;
    background: var(--act-primary);
    box-shadow: 0 3px 8px rgba(3, 133, 125, .25);
    color: #fff;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.act-db-y {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .03em;
}

.act-db-m,
.act-db-w {
    font-size: 12px;
    font-weight: 700;
}

.act-db-d {
    margin: 1px 0;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

/* 日期未定：虛線框 */
.act-db--tbd {
    border: 1px dashed var(--act-dash);
    background: transparent;
    box-shadow: none;
    color: var(--act-muted);
}

.act-db--tbd .act-db-m {
    font-size: 14px;
    line-height: 1.3;
}

.act-tk-time {
    min-width: 0;
}

.act-tk-clock {
    color: var(--act-dark);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.act-tk-dur {
    margin-top: 2px !important;
    color: var(--act-muted);
    font-size: 12px;
}

.act-tk-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.act-tk-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.act-tk-row .act-icon {
    margin-top: 3px;
    color: var(--act-primary);
}

.act-tk-room {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.act-tk-sub {
    display: block;
    color: var(--act-muted);
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* 撕線：左右半圓缺口只在詳情頁（淺底）顯示，其他頁面背景不同只保留虛線 */
.act-perf {
    position: relative;
    height: 18px;
}

.act-perf::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    left: 18px;
    border-top: 2px dashed #CBD6D4;
}

.act-perf i {
    display: none;
    position: absolute;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--act-line);
    border-radius: 50%;
    background: var(--act-bg);
}

.act-page .act-perf i {
    display: block;
}

.act-perf i:first-child {
    left: -10px;
    clip-path: inset(0 0 0 50%);
}

.act-perf i:last-child {
    right: -10px;
    clip-path: inset(0 50% 0 0);
}

.act-tk-bot {
    padding: 8px 16px 14px;
}

.act-tk-k,
.act-meter-k {
    color: var(--act-muted);
    font-size: 13px;
    font-weight: 500;
}

/* 名額：手機為一列「已報名 32 / 40 … 剩 8 個名額」＋名額條 */
.act-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 8px;
}

.act-meter-t {
    display: contents;
}

.act-meter-k {
    display: none;
}

.act-meter-n {
    grid-row: 1;
    grid-column: 1;
    color: var(--act-muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.act-meter-n b {
    color: var(--act-text);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.act-meter-left {
    grid-row: 1;
    grid-column: 2;
    color: var(--act-ok-text);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.act-meter.is-few .act-meter-left {
    color: var(--act-urgent);
}

.act-meter.is-full .act-meter-left,
.act-meter.is-full .act-meter-n b {
    color: var(--act-grey);
}

.act-bar {
    grid-column: 1 / -1;
    height: 8px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: #E3E9E8;
}

.act-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--act-primary);
}

.act-meter.is-few .act-bar i {
    background: var(--act-warn);
}

.act-meter.is-full .act-bar i {
    background: #9AA3AA;
}

/* 報名截止與開放時間 */
.act-deadline {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--act-divider);
}

.act-deadline-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.act-deadline-text {
    min-width: 0;
    color: var(--act-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.act-countdown {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 12px;
    background: var(--act-tint);
    color: var(--act-dark);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.act-countdown.is-urgent {
    background: var(--act-warn-bg);
    color: var(--act-urgent);
}

.act-countdown.is-past {
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
}

.act-opens {
    margin-top: 4px !important;
    color: var(--act-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* 報名按鈕：手機由底部列提供，票券卡內不重複 */
.act-cta {
    display: none;
    margin-top: 18px;
}

.act-btn,
.act-btn:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-align: center;
    text-decoration: none;
}

.act-btn--go,
.act-btn--go:visited {
    background: var(--act-primary);
    box-shadow: 0 4px 10px rgba(3, 133, 125, .28);
    color: #fff;
}

.act-btn--go:hover,
.act-btn--go:active {
    background: var(--act-dark);
    color: #fff;
    text-decoration: none;
}

.act-btn--view,
.act-btn--view:visited {
    border-color: var(--act-primary);
    background: #fff;
    color: var(--act-dark);
    font-size: 16px;
    letter-spacing: .02em;
}

.act-btn--view:hover {
    background: var(--act-tint);
    color: var(--act-dark);
    text-decoration: none;
}

/* 不可報名的狀態文字（非按鈕）：沿用按鈕外框，文字可能帶日期（例「報名已於 10/12（一）17:00 截止」），允許換行 */
.act-btn--off {
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
    font-size: 16px;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
}

.act-mine {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #CBE6D2;
    border-radius: 10px;
    background: var(--act-ok-bg);
    color: var(--act-ok-text);
}

.act-mine-ck {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--act-ok);
    color: #fff;
}

.act-mine-text {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* 非錄取（審核中、備取、不錄取、未定）：中性樣式，不顯示綠色勾選 */
.act-mine--neutral {
    border-color: var(--act-line);
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
}

/* 報名須知：手機為票券卡下方的標籤列 */
.act-tk-rules .act-tk-k {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.act-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.act-rule {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 9px;
    border: 1px solid var(--act-line);
    border-radius: 8px;
    background: #fff;
    color: var(--act-text);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.act-rule .act-icon {
    width: 14px;
    height: 14px;
    color: var(--act-sub);
}

.act-rule--pos {
    border-color: #CBE6D2;
    background: var(--act-ok-bg);
    color: var(--act-ok-text);
}

.act-rule--pos .act-icon {
    color: var(--act-ok-text);
}

.act-rule--neutral {
    color: var(--act-grey-text);
}

/* ---------- 6. 手機底部固定報名列 ---------- */
.act-mbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--act-line);
    background: #fff;
    box-shadow: 0 -6px 16px rgba(10, 86, 82, .10);
}

.act-mbar-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.act-mbar-main {
    color: var(--act-ok-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    /* 窄螢幕換行時以空白為界（「10/21 截止」不拆開），仍放不下才任意斷行 */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.act-mbar-main.is-few {
    color: var(--act-urgent);
}

.act-mbar-main.is-neutral {
    color: var(--act-grey-text);
}

/* 不可報名：底部列只有一行狀態文字（不放無法點按的按鈕） */
.act-mbar.is-closed .act-mbar-main {
    color: var(--act-grey-text);
}

.act-mbar.is-closed .act-mbar-info {
    min-height: 50px;
    justify-content: center;
}

.act-mbar-sub {
    margin-top: 1px;
    color: var(--act-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.act-mbar-sub.is-urgent {
    color: var(--act-urgent);
}

.act-mbar .act-btn {
    flex: none;
    width: auto;
    min-width: 128px;
    max-width: 46%;
    min-height: 50px;
    padding: 4px 16px;
    font-size: 17px;
    letter-spacing: .04em;
}

.act-mbar .act-btn--view {
    font-size: 15px;
    letter-spacing: 0;
}

/* ---------- 7. 左欄卡片 ---------- */
.act-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--act-line);
    border-radius: 12px;
    background: #fff;
}

.act-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--act-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.act-card-title::before {
    content: "";
    flex: none;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--act-primary);
}

.act-card-title small {
    margin-left: 4px;
    color: var(--act-muted);
    font-size: 13px;
    font-weight: 400;
}

/* 活動內容＋海報：手機海報排在內文之後 */
.act-intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.act-poster {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: var(--act-tint);
    cursor: zoom-in;
}

.act-poster-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.act-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 14px;
    background: rgba(10, 30, 30, .72);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

/* 橫式海報（所有寬度）：排在卡片標題正下方、內文接在下方用滿卡片寬。
   外框依圖片縮放（不固定 3:4、不留底色條），高度上限避免超寬或接近方形的海報佔滿畫面；
   伺服器已知橫式時海報在 DOM 中本就排在內文前；order:-1 僅供備援腳本在載入後切換版面時使用 */
.act-intro--wide .act-poster {
    order: -1;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    aspect-ratio: auto;
}

.act-intro--wide .act-poster-img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 360px;
}

/* CKEditor 輸出的內文 */
.act-content {
    min-width: 0;
    color: var(--act-text);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    /* 最後防線：固定寬度元素不撐出整頁水平捲動 */
    overflow-x: auto;
    /* overflow 會裁掉連結焦點框（2px＋offset 2px），四周留 4px 再以負邊距抵銷（比照 .ya-days） */
    margin: -4px;
    padding: 4px;
}

.act-content > :last-child {
    margin-bottom: 0;
}

.act-content p {
    margin: 0 0 12px;
}

.act-content h2,
.act-content h3,
.act-content h4 {
    margin: 20px 0 8px;
    color: var(--act-dark);
    font-size: 16px;
    font-weight: 700;
}

.act-content a {
    color: var(--act-dark);
    text-decoration: underline;
}

.act-content img,
.act-content video {
    max-width: 100%;
    height: auto;
}

/* iframe 保留原本高度（CKEditor 媒體嵌入以 inline style 控制比例） */
.act-content iframe,
.act-content figure {
    max-width: 100%;
}

/* 寬表格於區塊內水平捲動，不撐開整頁 */
.act-content figure.table,
.act-content > table,
.act-content :not(figure) > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.act-content figure.table {
    margin: 0 0 1rem;
}

.act-content table {
    border-collapse: collapse;
}

.act-content th,
.act-content td {
    min-width: 4em;
    padding: 6px 10px;
    border: 1px solid var(--act-line);
    vertical-align: top;
}

.act-content th p,
.act-content td p,
.act-content th div,
.act-content td div {
    margin-bottom: 0;
    overflow-wrap: break-word;
}

.act-content pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* 能力指標 */
.act-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    margin-top: 14px;
}

.act-group-label {
    margin-bottom: 8px !important;
    color: var(--act-muted);
    font-size: 13px;
    font-weight: 400;
}

.act-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.act-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 2px 14px;
    border: 1px solid var(--act-line);
    border-radius: 15px;
    background: #FAFCFC;
    color: var(--act-sub);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* SDGs：編號圓點＋名稱（群組標題已是 SDGs，晶片不重複「SDG」字樣） */
.act-chip--sdg {
    gap: 6px;
    padding-left: 5px;
}

.act-sdg-n {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 11px;
    background: var(--act-tint);
    color: var(--act-dark);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 附件 */
.act-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.act-file,
.act-file:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--act-line);
    border-radius: 10px;
    background: #fff;
    color: var(--act-text);
    text-decoration: none;
}

.act-file:hover {
    border-color: var(--act-primary);
    background: #FBFEFD;
    color: var(--act-text);
    text-decoration: none;
}

.act-ft {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--act-grey-bg);
    color: var(--act-grey-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.act-ft--pdf {
    background: #FDECEA;
    color: #B42318;
}

.act-ft--pptx {
    background: #FEF0E6;
    color: #A4400B;
}

.act-ft--docx {
    background: #E6F0FB;
    color: #1D4F91;
}

.act-ft--xlsx {
    background: var(--act-ok-bg);
    color: var(--act-ok-text);
}

.act-ft--image {
    background: var(--act-tint);
    color: var(--act-dark);
}

.act-fn {
    flex: 1;
    min-width: 0;
}

.act-fn-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.act-fn-meta {
    display: block;
    margin-top: 2px;
    color: var(--act-muted);
    font-size: 13px;
}

.act-dl {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--act-primary);
    border-radius: 8px;
    color: var(--act-dark);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* 承辦資訊（_Activity.cshtml 右欄 .act-side 內；手機為票券卡下方：承辦單位獨占第一列，聯絡人、分機同列，email 換行） */
.act-org-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    margin: 6px 0 0;
    padding: 0;
    color: var(--act-text);
    font-size: 15px;
    list-style: none;
}

.act-org-rows li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    min-width: 0;
    max-width: 100%;
}

.act-org-rows .act-icon {
    flex: none;
    color: var(--act-muted);
}

.act-org-k {
    flex: none;
    color: var(--act-muted);
    font-size: 14px;
}

.act-org-v {
    min-width: 0;
    overflow-wrap: anywhere;
}

.act-org-rows li.act-org-unit {
    flex-basis: 100%;
    align-items: flex-start;
    padding: 5px 0;
    font-weight: 700;
    line-height: 1.45;
}

.act-org-unit .act-icon {
    margin-top: 2px;
}

.act-mail,
.act-mail:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 0;
    color: var(--act-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(10, 86, 82, .4);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.act-mail:hover {
    color: var(--act-dark);
}

/* ---------- 8. 報名名單（Details，_ActivityUsers.cshtml） ---------- */
.act-roster {
    margin-top: 12px;
    scroll-margin-top: 16px;
}

.act-roster-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.act-roster-head {
    padding: 8px 0;
    border-bottom: 1px solid var(--act-line);
    color: var(--act-muted);
    font-size: 13px;
    font-weight: 500;
}

.act-roster-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--act-divider);
    color: var(--act-text);
    font-size: 15px;
    line-height: 1.5;
}

.act-roster-item:last-child {
    border-bottom: 0;
}

/* ==========================================================
   >= 768px：平板（仍為單欄＋底部列），內文與海報並排
   ========================================================== */
@media (min-width: 768px) {
    .act-title {
        font-size: 24px;
        line-height: 1.45;
    }

    .act-speaker {
        font-size: 15px;
    }

    .act-card {
        padding: 20px 24px;
    }

    .act-card-title {
        font-size: 18px;
    }

    .act-intro--poster {
        display: grid;
        grid-template-areas: "poster content";
        grid-template-columns: 200px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .act-intro--poster .act-poster {
        grid-area: poster;
    }

    .act-intro--poster .act-content {
        grid-area: content;
    }

    .act-content {
        font-size: 16px;
        line-height: 1.85;
    }

    .act-rule {
        font-size: 13px;
    }
}

/* ==========================================================
   >= 992px 桌機：左欄內容、右欄 360px 票券卡
   ========================================================== */
@media (min-width: 992px) {
    .act-page--cta {
        padding-bottom: 56px;
    }

    .act-topbar {
        min-height: 64px;
        margin: -8px 0 0;
    }

    .act-crumb,
    .act-admin {
        display: flex;
    }

    .act-back,
    .act-admin-m {
        display: none;
    }

    /* 第二列 1fr：票券卡跨兩列時，多出的高度只由第二列吸收，標題與內容間不留空 */
    .act-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: auto 1fr;
        gap: 0 40px;
        align-items: start;
    }

    .act-head {
        grid-row: 1;
        grid-column: 1;
    }

    .act-main {
        grid-row: 2;
        grid-column: 1;
        gap: 20px;
        margin-top: 20px;
    }

    /* 右欄（票券卡 + 承辦資訊卡）維持內容高度，整欄作為一個單位固定（見檔尾 .act-side.is-sticky） */
    .act-side {
        display: flex;
        flex-direction: column;
        gap: 16px;
        grid-row: 1 / span 2;
        grid-column: 2;
        align-self: start;
        min-width: 0;
    }

    .act-ticket {
        display: block;
        border: 1px solid var(--act-line);
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(10, 86, 82, .10);
    }

    .act-tk-card {
        border: 0;
        border-radius: 16px 16px 0 0;
        background: transparent;
        box-shadow: none;
    }

    .act-badge {
        min-height: 28px;
        padding: 2px 12px;
        border-radius: 14px;
        font-size: 14px;
    }

    .act-title {
        margin-top: 14px !important;
        font-size: 30px;
    }

    .act-speaker {
        margin-top: 10px !important;
        font-size: 16px;
    }

    .act-speaker-k {
        font-size: 14px;
    }

    .act-card {
        padding: 24px 28px;
    }

    .act-intro {
        margin-top: 18px;
    }

    .act-intro--poster {
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 28px;
    }

    .act-intro--wide {
        gap: 20px;
    }

    .act-intro--wide .act-poster-img {
        max-height: 440px;
    }

    .act-files {
        margin-top: 14px !important;
    }

    .act-file {
        gap: 14px;
        padding: 10px 16px 10px 12px;
    }

    .act-dl {
        padding: 0 14px;
    }

    /* 承辦資訊（桌機）：票券卡下方的次要小卡，標題與「報名須知」同級，每項一列 */
    .act-org-card {
        padding: 16px 24px 18px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(10, 86, 82, .06);
    }

    .act-org-card .act-card-title {
        color: var(--act-muted);
        font-size: 13px;
        font-weight: 500;
    }

    .act-org-card .act-card-title::before {
        display: none;
    }

    .act-org-rows {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        margin-top: 8px;
    }

    .act-org-rows li {
        display: grid;
        grid-template-columns: 22px 3.5em minmax(0, 1fr);
        gap: 8px;
    }

    /* email 與承辦單位列沒有可見標籤，值接在圖示後佔滿剩餘寬度 */
    .act-org-rows li > .act-mail,
    .act-org-unit > .act-org-v {
        grid-column: 2 / -1;
    }

    .act-org-rows li.act-org-unit {
        padding: 6px 0;
    }

    .act-mail,
    .act-mail:visited {
        min-height: 32px;
    }

    /* 票券卡（桌機） */
    .act-tk-top {
        padding: 22px 24px 18px;
        border-top-width: 5px;
        border-radius: 16px 16px 0 0;
    }

    .act-tk-when {
        gap: 16px;
    }

    .act-db {
        width: 88px;
        min-height: 96px;
        padding: 9px 4px 10px;
        border-radius: 12px;
    }

    .act-db-y {
        font-size: 12px;
    }

    .act-db-m,
    .act-db-w {
        font-size: 14px;
    }

    .act-db-d {
        margin: 2px 0;
        font-size: 40px;
    }

    .act-db--tbd .act-db-m {
        font-size: 16px;
    }

    .act-tk-clock {
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: .01em;
    }

    .act-tk-dur {
        font-size: 13px;
    }

    .act-tk-rows {
        margin-top: 18px;
    }

    .act-tk-row {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
    }

    .act-tk-room {
        font-size: 16px;
    }

    .act-tk-sub {
        font-size: 13px;
    }

    .act-perf {
        height: 22px;
    }

    .act-perf::after {
        right: 20px;
        left: 20px;
    }

    .act-perf i {
        width: 22px;
        height: 22px;
    }

    .act-perf i:first-child {
        left: -12px;
    }

    .act-perf i:last-child {
        right: -12px;
    }

    .act-tk-bot {
        padding: 14px 24px 22px;
    }

    /* 名額（桌機）：「名額 … 剩 8 個名額」／「已報名 32 / 40」／名額條 */
    .act-meter-k {
        display: inline;
        grid-row: 1;
        grid-column: 1;
    }

    .act-meter-n {
        grid-row: 2;
        grid-column: 1 / -1;
        margin-top: 2px !important;
    }

    .act-meter-n b {
        font-size: 20px;
    }

    .act-bar {
        margin-top: 8px;
    }

    .act-deadline {
        margin-top: 16px;
        padding-top: 14px;
    }

    .act-deadline-text {
        font-size: 15px;
    }

    .act-cta {
        display: block;
    }

    .act-tk-rules {
        margin: 0 24px;
        padding: 14px 0 22px;
        border-top: 1px solid var(--act-divider);
    }

    .act-tk-rules .act-tk-k {
        position: static;
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
    }

    .act-tk-rules .act-rules {
        margin-top: 8px;
    }

    .act-rule {
        gap: 5px;
        padding: 3px 10px;
        background: var(--act-bg);
    }

    .act-rule--pos {
        background: var(--act-ok-bg);
    }

    .act-mbar {
        display: none;
    }

    .act-roster {
        margin-top: 20px;
        padding: 24px 28px;
    }
}

/* 右欄整欄固定：票券卡與承辦資訊卡一起移動，資訊卡不會被票券卡蓋住。
   各活動右欄高度不同，由 _Activity.cshtml 的內嵌腳本量測，整欄（含上下 24px）放得進視窗時才加上 is-sticky；
   放不下或沒有 JS 時隨頁面捲動，確保每一列都捲得到 */
@media (min-width: 992px) {
    .act-side.is-sticky {
        position: sticky;
        top: 24px;
    }
}

/* ==========================================================
   9. 報名表單頁精簡模式（ViewData["adCompact"] = true → .act-activity--compact）
   使用頁：ActivityUsers/Create、ActivityUsers/Edit、Shared/_CreateUser（現場報名、補登、審核新增）。
   頁面以 .act-formpage 包住本區塊與表單欄 .af-col；本區塊與 .act-layout 以 display: contents 攤平，
   標題、右欄、收合的活動內容與表單成為同一個版面的子項目。
   以下規則除 .act-more* 外一律以 .act-formpage／.act-activity--compact 開頭；.act-more* 只會出現在精簡模式的標記中，活動詳情頁不受影響。
   ========================================================== */
.act-activity--compact,
.act-activity--compact .act-layout {
    display: contents;
}

/* 手機／平板：標題 → 票券卡 → 報名須知 → 承辦資訊 → 查看活動內容（一列） → 表單；視覺順序與 DOM／焦點順序一致（不使用 order） */
.act-formpage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 查看活動內容：預設關閉的收合區，關閉時只佔一列 */
.act-more {
    border: 1px solid var(--act-line);
    border-radius: 12px;
    background: #fff;
}

.act-more-sum {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    min-height: 48px;
    padding: 10px 44px 10px 16px;
    position: relative;
    border-radius: 12px;
    color: var(--act-dark);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.act-more-sum::-webkit-details-marker {
    display: none;
}

.act-more-sum::marker {
    content: "";
}

.act-more-sum:hover {
    background: var(--act-tint);
}

.act-more[open] > .act-more-sum {
    border-bottom: 1px solid var(--act-divider);
    border-radius: 12px 12px 0 0;
}

.act-more-k {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.act-more-hint {
    color: var(--act-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.act-more-chev {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -8px;
    transition: transform .15s ease;
}

.act-more[open] .act-more-chev {
    transform: rotate(180deg);
}

/* 展開後內含原本的活動內容、能力指標、附件卡片；外框已是卡片，內層卡片改為分隔線 */
.act-more-body {
    display: flex;
    flex-direction: column;
}

.act-more-body > .act-card {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.act-more-body > .act-card + .act-card {
    border-top: 1px solid var(--act-divider);
}

@media (prefers-reduced-motion: reduce) {
    .act-more-chev {
        transition: none;
    }
}

/* 桌機：左欄 標題 → 查看活動內容（一列） → 表單；右欄票券卡＋承辦資訊卡跨三列（is-sticky 照常運作） */
@media (min-width: 992px) {
    .act-formpage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: auto auto 1fr;
        gap: 0 40px;
        align-items: start;
    }

    .act-formpage .af-col {
        grid-row: 3;
        grid-column: 1;
        margin-top: 20px;
    }

    .act-activity--compact .act-main {
        grid-row: 2;
        grid-column: 1;
        margin-top: 20px;
    }

    .act-activity--compact .act-side {
        grid-row: 1 / span 3;
    }

    .act-more-sum {
        padding: 12px 52px 12px 24px;
    }

    .act-more-chev {
        right: 24px;
    }
}