{"id":12229,"date":"2026-01-16T15:02:01","date_gmt":"2026-01-16T07:02:01","guid":{"rendered":"https:\/\/control.mcu.edu.tw\/?page_id=12229"},"modified":"2026-02-02T21:47:11","modified_gmt":"2026-02-02T13:47:11","slug":"fininfo","status":"publish","type":"page","link":"https:\/\/control.mcu.edu.tw\/en\/fininfo\/","title":{"rendered":"Financial Report Information"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\"><div class=\"x-section has-particle e12229-1 m9fp-0 m9fp-1 m9fp-3 m9fp-4\"><div class=\"x-row e12229-2 m9fp-5\"><div class=\"x-row-inner\"><div class=\"x-col e12229-3 m9fp-6\"><span class=\"x-image e12229-4 m9fp-7\"><img src=\"https:\/\/control.mcu.edu.tw\/wp-content\/uploads\/sites\/11\/2023\/12\/\u8ca1\u52d9\u516c\u958b\u8cc7\u8a0aEN-1.gif\" width=\"640\" height=\"250\" alt=\"Image\" loading=\"lazy\"><\/span><\/div><\/div><\/div><span class=\"x-particle is-primary\" data-x-particle=\"scale-y inside-b_c\" aria-hidden=\"true\"><span style=\"\"><\/span><\/span><span class=\"x-particle is-secondary\" data-x-particle=\"scale-y inside-b_c\" aria-hidden=\"true\"><span style=\"\"><\/span><\/span><\/div><div class=\"x-section e12229-5 m9fp-0 m9fp-2\"><div class=\"x-row e12229-6 m9fp-5\"><div class=\"x-row-inner\"><div class=\"x-col e12229-7 m9fp-6\"><!-- HFCM by 99 Robots - Snippet # 3: \u8ca1\u52d9\u516c\u958b\u8cc7\u8a0a\uff08\u82f1\u6587\uff09 -->\n<div id=\"financeBrowser\">\r\n  <div class=\"fb-loading\" id=\"fbLoading\" aria-live=\"polite\">Loading...<\/div>\r\n  <div class=\"fb-shell\">\r\n    <div class=\"fb-grid\">\r\n      <!-- LEFT -->\r\n      <div class=\"fb-left\">\r\n        <div class=\"fb-toprow\">\r\n          <div id=\"fbActiveType\" class=\"fb-active\"><\/div>\r\n          <div class=\"fb-sort\">\r\n            <select class=\"fb-select\" id=\"fbSort\">\r\n              <option value=\"date_desc\">Newest first<\/option>\r\n              <option value=\"date_asc\">Oldest first<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"fb-list\" id=\"fbList\"><\/div>\r\n        <div class=\"fb-pager\" id=\"fbPager\"><\/div>\r\n        <div class=\"fb-foot\" id=\"fbCount\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- RIGHT -->\r\n      <div class=\"fb-right\">\r\n        <div class=\"fb-panel\">\r\n          <div class=\"fb-section\">\r\n            <div class=\"fb-hd\">\r\n              <div class=\"t\">Information Type<\/div>\r\n              <div class=\"s\"><\/div>\r\n            <\/div>\r\n            <div class=\"type-row\" id=\"fbTypeRow\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"fb-section\">\r\n            <div class=\"fb-hd\">\r\n              <div class=\"t\">Item<\/div>\r\n              <div class=\"s\"><\/div>\r\n            <\/div>\r\n            <div class=\"item-grid\" id=\"fbItemGrid\"><\/div>\r\n          <\/div>\r\n\r\n          <div class=\"fb-section\">\r\n            <div class=\"fb-hd\"><div class=\"t\">Academic Year<\/div><div class=\"s\">Auto-generated from data<\/div><\/div>\r\n            <select class=\"fb-select\" id=\"fbYear\"><\/select>\r\n          <\/div>\r\n\r\n          <div class=\"fb-section\" id=\"fbMonthWrap\" style=\"display:none;\">\r\n            <div class=\"fb-hd\"><div class=\"t\">Month<\/div><div class=\"s\">Monthly reports only<\/div><\/div>\r\n            <select class=\"fb-select\" id=\"fbMonth\"><\/select>\r\n          <\/div>\r\n\r\n          <div class=\"btnrow\">\r\n            <button class=\"btn ghost\" id=\"fbReset\" type=\"button\">Reset<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n  :root{\r\n    --bg: #ffffff;\r\n    --panel: #ffffff;\r\n    --muted: rgba(0,0,0,.58);\r\n    --text: rgba(0,0,0,.88);\r\n    --line: rgba(0,0,0,.10);\r\n    --line2: rgba(0,0,0,.07);\r\n    --accent: #4868BB;\r\n    --accentSoft: rgba(72,104,187,.10);\r\n    --accent2: #663C10;\r\n    --accent2Soft: rgba(102,60,16,.10);\r\n    --accent3: #E48223;\r\n    --accent3Soft: rgba(228,130,35,.12);\r\n    --radius: 16px;\r\n  }\r\n\r\n  #financeBrowser{\r\n    margin:0 auto;padding:20px 14px;\r\n    color:var(--text);\r\n    font-size:16px;\r\n    position:relative;\r\n  }\r\n\r\n  .fb-shell{\r\n    overflow:hidden;\r\n  }\r\n  .fb-loading{\r\n    position:absolute;\r\n    inset:0;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    background:rgba(255,255,255,.75);\r\n    color:var(--text);\r\n    font-weight:800;\r\n    letter-spacing:.02em;\r\n    z-index:20;\r\n  }\r\n  .fb-loading.is-hidden{ display:none; }\r\n\r\n  .fb-grid{\r\n    display:grid;\r\n    grid-template-columns: 3fr 2fr;\r\n    gap:16px;\r\n    padding:16px;\r\n    background:var(--bg);\r\n  }\r\n  @media (max-width: 980px){\r\n    .fb-grid{grid-template-columns:1fr}\r\n    .fb-left{order:2}\r\n    .fb-right{order:1}\r\n    .fb-toprow{flex-direction:column; align-items:stretch;}\r\n    .fb-sort{min-width:0;}\r\n    .fb-sort .fb-select{font-size:15px; min-height:46px;}\r\n  }\r\n\r\n  \/* ===== Left list ===== *\/\r\n  .fb-list{display:grid;gap:10px}\r\n  .fb-toprow{\r\n    display:flex;\r\n    align-items:flex-end;\r\n    justify-content:space-between;\r\n    gap:12px;\r\n    margin-bottom:12px;\r\n  }\r\n  .fb-toprow .fb-active{margin-bottom:0; flex:1;}\r\n  .fb-sort{\r\n    min-width:160px;\r\n  }\r\n  .fb-sort .fb-select{\r\n    min-height:44px;\r\n    line-height:1.2;\r\n    font-size:14px;\r\n    padding-top:10px;\r\n    padding-bottom:10px;\r\n  }\r\n\r\n  .fb-item{\r\n    border:1px solid var(--line2);\r\n    border-radius:var(--radius);\r\n    padding:14px;\r\n    display:flex;\r\n    gap:14px;\r\n    align-items:flex-start;\r\n    background:#fff;\r\n    transition:background .12s ease, border-color .12s ease;\r\n    position:relative;\r\n  }\r\n  .fb-item:hover{\r\n    background:rgba(0,0,0,.015);\r\n    border-color:var(--line);\r\n  }\r\n  .fb-dash{\r\n    position:absolute;\r\n    inset:0;\r\n    width:100%;\r\n    height:100%;\r\n    pointer-events:none;\r\n    opacity:0;\r\n    overflow:visible;\r\n  }\r\n  .fb-dash-rect{\r\n    width:calc(100% - 2px);\r\n    height:calc(100% - 2px);\r\n    rx:var(--radius);\r\n    ry:var(--radius);\r\n    fill:none;\r\n    stroke-width:2;\r\n    stroke-dasharray:6 6;\r\n    stroke-linecap:round;\r\n    stroke-linejoin:round;\r\n    vector-effect:non-scaling-stroke;\r\n  }\r\n  .fb-item:hover .fb-dash{\r\n    opacity:1;\r\n  }\r\n  .fb-item:hover .fb-dash-rect{\r\n    animation:fb-dash-move 1.6s linear infinite;\r\n  }\r\n  .fb-item .fb-dash-rect{ stroke:var(--t-main, #4868BB); }\r\n\r\n  .fb-ico{\r\n    width:54px;height:54px;\r\n    border-radius:14px;\r\n    display:flex;align-items:center;justify-content:center;\r\n    font-weight:900;\r\n    font-size:16px;\r\n    color:#fff;\r\n    background:var(--t-main, #1f2937);\r\n    flex:0 0 auto;\r\n  }\r\n  .fb-ico img{\r\n    width:42px;\r\n    height:42px;\r\n    object-fit:contain;\r\n    display:block;\r\n  }\r\n\r\n  .fb-main{\r\n    flex:1;\r\n    min-width:0;\r\n    min-height:54px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    justify-content:center;\r\n  }\r\n  .fb-title2{\r\n    margin:0 0 6px;\r\n    font-style:normal;\r\n    font-weight:400;\r\n    font-size:20px;\r\n    line-height:1.4;\r\n    letter-spacing:0;\r\n    text-transform:none;\r\n    word-break:break-word;\r\n    white-space:normal;\r\n    position:relative;\r\n  }\r\n  .fb-title2{ color:rgba(0, 0, 0, 1); }\r\n  .fb-title2::after{\r\n    content:\"\";\r\n    display:block;\r\n    width:56px;\r\n    height:2px;\r\n    margin-top:6px;\r\n    background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,0));\r\n  }\r\n  .fb-meta{display:block}\r\n\r\n  .fb-tags{\r\n    display:flex;\r\n    gap:6px;\r\n    flex-wrap:wrap;\r\n    position:relative;\r\n    padding-top:8px;\r\n  }\r\n  .fb-tags::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    left:0;\r\n    right:0;\r\n    top:0;\r\n    height:1px;\r\n    background:linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0));\r\n  }\r\n  .fb-tag{\r\n    font-size:12px;\r\n    font-weight:500;\r\n    border-radius:999px;\r\n    padding:4px 8px;\r\n    border:1px solid var(--t-tag-border, var(--line2));\r\n    background:var(--t-tag-bg, #fff);\r\n    color:var(--t-tag-text, rgba(0,0,0,.55));\r\n  }\r\n\r\n  .fb-actions{\r\n    flex:0 0 auto;\r\n    min-width: 120px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:stretch;\r\n    gap:6px;\r\n  }\r\n  .fb-date{\r\n    font-size:12px;\r\n    color:var(--muted);\r\n    font-weight:700;\r\n    white-space:nowrap;\r\n    align-self:flex-end;\r\n  }\r\n  @media (max-width: 680px){\r\n    .fb-item{\r\n      display:grid;\r\n      grid-template-columns:auto 1fr;\r\n      grid-template-areas:\r\n        \"icon main\"\r\n        \"actions actions\";\r\n      align-items:start;\r\n    }\r\n    .fb-ico{ grid-area:icon; }\r\n    .fb-main{ grid-area:main; }\r\n    .fb-actions{ grid-area:actions; }\r\n  }\r\n  .fb-link{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    border-radius:12px;\r\n    border:1px solid #d2d6e2;\r\n    padding:10px 14px;\r\n    text-decoration:none;\r\n    color:var(--text);\r\n    background:linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);\r\n    font-size:15px;\r\n    font-weight:800;\r\n    box-shadow:0 6px 14px rgba(0,0,0,.08);\r\n    transition:background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;\r\n    width:100%;\r\n    box-sizing:border-box;\r\n  }\r\n  .fb-link .fb-hand{\r\n    width:16px;\r\n    height:16px;\r\n    margin-right:6px;\r\n    display:inline-block;\r\n    vertical-align:-2px;\r\n    object-fit:contain;\r\n    animation:fb-hand-wiggle 1.2s ease-in-out infinite;\r\n  }\r\n  .fb-link:hover{\r\n    background:linear-gradient(180deg, #ffffff 0%, #eef1f6 100%);\r\n    border-color:#c7cddc;\r\n    transform:translateY(-1px);\r\n    box-shadow:0 10px 20px rgba(0,0,0,.1);\r\n  }\r\n  .fb-link:active{\r\n    transform:translateY(1px);\r\n    box-shadow:0 4px 10px rgba(0,0,0,.08);\r\n  }\r\n  .fb-link .dot{display:none;}\r\n  @keyframes fb-hand-wiggle{\r\n    0%, 100%{ transform:translateX(0); }\r\n    50%{ transform:translateX(4px); }\r\n  }\r\n\r\n  .fb-btn{\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    border-radius:12px;\r\n    border:1px solid var(--line2);\r\n    padding:10px 12px;\r\n    background:#fff;\r\n    color:var(--text);\r\n    font-size:15px;\r\n    font-weight:800;\r\n    cursor:pointer;\r\n    transition:background .12s ease, border-color .12s ease;\r\n    width:100%;\r\n    box-sizing:border-box;\r\n  }\r\n  .fb-btn:hover{ background:rgba(0,0,0,.02); border-color:var(--line); }\r\n\r\n  .fb-empty{\r\n    padding:16px;\r\n    border:1px dashed var(--line);\r\n    border-radius:var(--radius);\r\n    font-size:14px;\r\n    color:var(--muted);\r\n    background:rgba(0,0,0,.01);\r\n  }\r\n\r\n  .fb-foot{\r\n    margin-top:12px;\r\n    font-size:14px;\r\n    color:var(--muted);\r\n    font-weight:700;\r\n    align-self:flex-end;\r\n    text-align:right;\r\n  }\r\n  .fb-pager{\r\n    display:flex;\r\n    gap:6px;\r\n    flex-wrap:wrap;\r\n    justify-content:flex-end;\r\n    margin-top:12px;\r\n  }\r\n  .fb-page-btn{\r\n    border:1px solid var(--line2);\r\n    background:#fff;\r\n    color:var(--text);\r\n    border-radius:10px;\r\n    padding:6px 10px;\r\n    min-width:36px;\r\n    text-align:center;\r\n    font-size:13px;\r\n    font-weight:800;\r\n    cursor:pointer;\r\n    transition:background .12s ease, border-color .12s ease;\r\n  }\r\n  .fb-page-btn:hover{\r\n    background:rgba(0,0,0,.03);\r\n    border-color:var(--line);\r\n  }\r\n  .fb-page-btn[aria-current=\"page\"]{\r\n    background:var(--type-soft, var(--accentSoft));\r\n    border-color:var(--type-border, rgba(72,104,187,.35));\r\n    color:var(--type-main, var(--accent));\r\n  }\r\n  .fb-page-btn:disabled{\r\n    cursor:not-allowed;\r\n    opacity:.45;\r\n  }\r\n  .fb-left{\r\n    display:flex;\r\n    flex-direction:column;\r\n  }\r\n\r\n  \/* ===== Active type bar ===== *\/\r\n  .fb-active{\r\n    display:flex;align-items:center;gap:10px;\r\n    padding:10px 12px;\r\n    margin-bottom:12px;\r\n    font-weight:850;\r\n    font-size:14px;\r\n    background:#fff;\r\n  }\r\n  .fb-active .chip{\r\n    display:inline-flex;align-items:center;gap:2px;\r\n    border-radius:999px;\r\n    padding:7px 12px;\r\n    font-size:16px;\r\n    font-weight:900;\r\n    border:1px solid var(--t-soft-border, var(--line2));\r\n    background:var(--t-chip-bg, #fff);\r\n    color:var(--t-main, var(--text));\r\n  }\r\n  .fb-active .dot{\r\n    width:10px;height:10px;border-radius:999px;\r\n    background:var(--t-main, var(--accent));\r\n    box-shadow:0 0 0 4px var(--t-soft, rgba(72,104,187,.10));\r\n    margin-right:6px;\r\n    animation: fb-dot-pulse 1.6s ease-in-out infinite;\r\n  }\r\n  @keyframes fb-dot-pulse{\r\n    0%, 100%{ opacity:1; transform:scale(1); }\r\n    50%{ opacity:.35; transform:scale(.85); }\r\n  }\r\n  .fb-active .chip .wave{\r\n    display:inline-block;\r\n    animation: fb-wave 1.8s ease-in-out infinite;\r\n  }\r\n  @keyframes fb-wave{\r\n    0%, 100%{ transform: translateY(0); }\r\n    50%{ transform: translateY(-4px); }\r\n  }\r\n\r\n  .fb-panel{\r\n    border:1px solid var(--line2);\r\n    border-radius:18px;\r\n    padding:14px;\r\n    background:var(--panel);\r\n    position:sticky;\r\n    top:14px;\r\n  }\r\n  @media (max-width: 980px){ .fb-panel{position:static} }\r\n\r\n  .fb-section{margin-bottom:20px}\r\n  .fb-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}\r\n  .fb-hd .t{\r\n    font-weight:900;\r\n    font-size:16px;\r\n    letter-spacing:0.06em;\r\n  }\r\n  .fb-hd .s{font-size:12px;color:var(--muted)}\r\n\r\n  .fb-select{\r\n    width:100%;\r\n    border:1px solid var(--line2);\r\n    border-radius:14px;\r\n    padding:12px 40px 12px 12px;\r\n    background:#fff;\r\n    font-size:16px;\r\n    outline:none;\r\n    min-height:46px;\r\n    box-sizing:border-box;\r\n    -webkit-appearance:none;\r\n    -moz-appearance:none;\r\n    appearance:none;\r\n    background-image:\r\n      linear-gradient(45deg, transparent 50%, rgba(0,0,0,.45) 50%),\r\n      linear-gradient(135deg, rgba(0,0,0,.45) 50%, transparent 50%);\r\n    background-position:\r\n      calc(100% - 18px) 52%,\r\n      calc(100% - 12px) 52%;\r\n    background-size:6px 6px, 6px 6px;\r\n    background-repeat:no-repeat;\r\n  }\r\n  .fb-select:focus{\r\n    border-color:rgba(17,24,39,.25);\r\n    box-shadow:none;\r\n  }\r\n\r\n\r\n  .type-row{\r\n    display:grid;\r\n    grid-template-columns:repeat(3, minmax(0, 1fr));\r\n    gap:16px;\r\n  }\r\n  @media (max-width: 980px){\r\n    .type-row{grid-template-columns:1fr}\r\n  }\r\n\r\n  .type-card{\r\n    position:relative;\r\n    border:1px solid #d8dbe6;\r\n    border-radius:18px;\r\n    padding:12px 10px;\r\n    background:#f7f7fb;\r\n    cursor:pointer;\r\n    margin-bottom:8px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    text-align:center;\r\n    gap:10px;\r\n    min-height:96px;\r\n    transform-style:preserve-3d;\r\n    transition:transform .18s cubic-bezier(0.2, 0.7, 0.2, 1), background .18s cubic-bezier(0.2, 0.7, 0.2, 1), border-color .12s ease;\r\n  }\r\n  .type-card::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border-radius:inherit;\r\n    background:#e6e8f1;\r\n    box-shadow:0 0 0 2px #cfd4e2, 0 8px 0 0 #cfd4e2;\r\n    transform:translate3d(0, 8px, -1px);\r\n    transition:transform .18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow .18s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n    z-index:0;\r\n  }\r\n  .type-card > *{ position:relative; z-index:1; }\r\n  .type-card:hover{\r\n    background:#f0f1f8;\r\n    border-color:#cfd4e2;\r\n    transform:translate(0, 2px);\r\n  }\r\n  .type-card:hover::before{\r\n    box-shadow:0 0 0 2px #c7cddc, 0 6px 0 0 #c7cddc;\r\n    transform:translate3d(0, 6px, -1px);\r\n  }\r\n  .type-card[aria-pressed=\"true\"]{\r\n    border-color:#c3c9d8;\r\n    background:#e9ebf4;\r\n    transform:translate(0, 7px);\r\n  }\r\n  .type-card[aria-pressed=\"true\"]::before{\r\n    box-shadow:0 0 0 2px #c3c9d8, 0 0 0 0 #c3c9d8;\r\n    transform:translate3d(0, 0, -1px);\r\n  }\r\n  .type-card:active{\r\n    transform:translate(0, 7px);\r\n  }\r\n  .type-card:active::before{\r\n    box-shadow:0 0 0 2px #c3c9d8, 0 0 0 0 #c3c9d8;\r\n    transform:translate3d(0, 0, -1px);\r\n  }\r\n  .type-card.has-theme{\r\n    background:var(--t-main, #4868BB);\r\n    border-color:var(--t-border, #35508F);\r\n    color:#ffffff;\r\n  }\r\n  .type-card.has-theme::before{\r\n    background:var(--t-before-bg, #35508F);\r\n    box-shadow:0 0 0 2px var(--t-shadow, #2E467E), 0 8px 0 0 var(--t-shadow, #2E467E);\r\n  }\r\n  .type-card.has-theme:hover{ background:var(--t-hover-main, #5A79C3); }\r\n  .type-badge{\r\n    width:116px;height:116px;\r\n    border-radius:0;\r\n    display:flex;align-items:center;justify-content:center;\r\n    color:var(--t-main, var(--accent));\r\n    font-weight:900;\r\n    font-size:14px;\r\n    background:transparent;\r\n  }\r\n  .type-badge img{\r\n    width:104px;\r\n    height:104px;\r\n    object-fit:contain;\r\n    display:block;\r\n  }\r\n  .type-name{\r\n    font-weight:850;\r\n    font-size:20px;\r\n    line-height:1.25;\r\n    word-break:break-word;\r\n  }\r\n\r\n  \/* ===== Item cards grid ===== *\/\r\n  .item-grid{\r\n    display:grid;\r\n    grid-template-columns:repeat(2, minmax(0,1fr));\r\n    gap:16px;\r\n  }\r\n  .item-card{\r\n    position:relative;\r\n    border:1px solid #d8dbe6;\r\n    border-radius:14px;\r\n    padding:12px 10px;\r\n    background:#f7f7fb;\r\n    cursor:pointer;\r\n    margin-bottom:8px;\r\n    min-height:110px;\r\n    display:flex;\r\n    flex-direction:column;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:8px;\r\n    text-align:center;\r\n    transform-style:preserve-3d;\r\n    transition:transform .18s cubic-bezier(0.2, 0.7, 0.2, 1), background .18s cubic-bezier(0.2, 0.7, 0.2, 1), border-color .12s ease;\r\n  }\r\n  .item-card::before{\r\n    content:\"\";\r\n    position:absolute;\r\n    inset:0;\r\n    border-radius:inherit;\r\n    background:#e6e8f1;\r\n    box-shadow:0 0 0 2px #cfd4e2, 0 8px 0 0 #cfd4e2;\r\n    transform:translate3d(0, 8px, -1px);\r\n    transition:transform .18s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow .18s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n    z-index:0;\r\n  }\r\n  .item-card > *{ position:relative; z-index:1; }\r\n  .item-card:hover{\r\n    background:#f0f1f8;\r\n    border-color:#cfd4e2;\r\n    transform:translate(0, 2px);\r\n  }\r\n  .item-card:hover::before{\r\n    box-shadow:0 0 0 2px #c7cddc, 0 6px 0 0 #c7cddc;\r\n    transform:translate3d(0, 6px, -1px);\r\n  }\r\n  .item-card[aria-pressed=\"true\"]{\r\n    border-color:#c3c9d8;\r\n    background:#e9ebf4;\r\n    transform:translate(0, 7px);\r\n  }\r\n  .item-card[aria-pressed=\"true\"]::before{\r\n    box-shadow:0 0 0 2px #c3c9d8, 0 0 0 0 #c3c9d8;\r\n    transform:translate3d(0, 0, -1px);\r\n  }\r\n  .item-card:active{\r\n    transform:translate(0, 7px);\r\n  }\r\n  .item-card.has-theme{\r\n    background:linear-gradient(160deg, var(--t-grad-start, #8FA6E8) 0%, var(--t-grad-end, #4B6CC4) 100%);\r\n    border-color:var(--t-border, #3E5EA9);\r\n    color:#ffffff;\r\n  }\r\n  .item-card.has-theme::before{\r\n    background:linear-gradient(160deg, var(--t-grad-end-copy, #4A66B8) 0%, var(--t-shadow, #2E458C) 100%);\r\n    box-shadow:0 0 0 2px var(--t-shadow, #27407F), 0 10px 0 0 var(--t-shadow, #27407F);\r\n  }\r\n  .item-card.has-theme:hover{\r\n    background:linear-gradient(160deg, var(--t-hover-start, #9FB6F2) 0%, var(--t-hover-end, #5A7AD0) 100%);\r\n  }\r\n  .item-card:active::before{\r\n    box-shadow:0 0 0 2px #c3c9d8, 0 0 0 0 #c3c9d8;\r\n    transform:translate3d(0, 0, -1px);\r\n  }\r\n  .item-card.all{\r\n    grid-column:1 \/ -1;\r\n    min-height:auto;\r\n    padding:12px;\r\n    flex-direction:row;\r\n    justify-content:center;\r\n    gap:8px;\r\n  }\r\n  @keyframes fb-dash-move{\r\n    to{ stroke-dashoffset:-24; }\r\n  }\r\n  .item-thumb{\r\n    width:76px;\r\n    height:76px;\r\n    border-radius:14px;\r\n    display:block;\r\n    object-fit:contain;\r\n    box-shadow:none;\r\n    padding:4px;\r\n  }\r\n  .item-card .txt{\r\n    font-weight:800;\r\n    font-size:17px;\r\n    line-height:1.25;\r\n    word-break:break-word;\r\n  }\r\n\r\n  .btnrow{display:flex;gap:10px;margin-top:10px}\r\n  .btn{\r\n    flex:1;\r\n    border:1px solid #d2d6e2;\r\n    background:linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);\r\n    border-radius:14px;\r\n    padding:12px 12px;\r\n    cursor:pointer;\r\n    font-weight:850;\r\n    font-size:15px;\r\n    box-shadow:0 6px 14px rgba(0,0,0,.08);\r\n    transition:background .12s ease, border-color .12s ease, transform .12s ease, box-shadow .12s ease;\r\n  }\r\n  .btn.primary{\r\n    background:var(--accent);\r\n    color:#fff;\r\n    border-color:var(--accent);\r\n  }\r\n  .btn.ghost{\r\n    background:linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%);\r\n    color:#2f3440;\r\n    border-color:#d2d6e2;\r\n  }\r\n  .btn:hover{\r\n    background:linear-gradient(180deg, #ffffff 0%, #eef1f6 100%);\r\n    border-color:#c7cddc;\r\n    transform:translateY(-1px);\r\n    box-shadow:0 10px 20px rgba(0,0,0,.1);\r\n  }\r\n  .btn:active{\r\n    transform:translateY(1px);\r\n    box-shadow:0 4px 10px rgba(0,0,0,.08);\r\n  }\r\n  .btn.primary:hover{background:#0b1220;border-color:#0b1220}\r\n\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById(\"financeBrowser\");\r\n  if(!root) return;\r\n\r\n\/\/   const REST_BASE = \"https:\/\/mcu-api.jioujhong.com\/wp-json\/mcu-api\/v2\";\r\n\tconst REST_BASE = \"https:\/\/control.mcu.edu.tw\/wp-json\/wp\/v2\";\r\n  const REST_ENDPOINTS = {\r\n    posts: \"financial-disclosure\",\r\n    cate: \"fin-disclosure-cate\",\r\n    year: \"fin-disclosure-year\",\r\n  };\r\n  const DEFAULT_TYPE_COLORS = {\r\n    \"monthly-financial-report-information\": {\r\n      main: \"#4868BB\",\r\n      gradStart: \"#8FA6E8\",\r\n      gradEnd: \"#4B6CC4\",\r\n      gradEndCopy: \"#4A66B8\",\r\n    },\r\n    \"annual-deposit-financial-statements\": {\r\n      main: \"#663C10\",\r\n      gradStart: \"#B27A3D\",\r\n      gradEnd: \"#6B3F19\",\r\n      gradEndCopy: \"#7A4A22\",\r\n    },\r\n    \"physical-rehabilitation-subsidy-materials\": {\r\n      main: \"#E48223\",\r\n      gradStart: \"#F3B357\",\r\n      gradEnd: \"#C9791F\",\r\n      gradEndCopy: \"#D0832A\",\r\n    },\r\n    __default: {\r\n      main: \"#4868BB\",\r\n      gradStart: \"#8FA6E8\",\r\n      gradEnd: \"#4B6CC4\",\r\n      gradEndCopy: \"#4A66B8\",\r\n    },\r\n  };\r\n  const TERM_LABELS = {\r\n    \"\u8ca1\u52d9\u516c\u958b\u8cc7\u8a0a\": \"Financial Report Information\",\r\n    \"\u6bcf\u6708\u8ca1\u52d9\u5831\u8868\u8cc7\u8a0a\": \"Monthly Financial Report\",\r\n    \"\u5408\u4f75\u6708\u5831\u8868\": \"Consolidated\",\r\n    \"\u53f0\u7063\u672c\u90e8\u6708\u5831\u8868\": \"Taiwan Location\",\r\n    \"\u7f8e\u570b\u5206\u6821\u6708\u5831\u8868\": \"U.S. Location\",\r\n    \"\u4eba\u4e8b\u8cbb\u6708\u5831\u8868\": \"Personnel Expenses\",\r\n    \"\u5e74\u5ea6\u9810\u3001\u6c7a\u7b97\u8cc7\u8a0a\": \"Annual Financial Statement\",\r\n    \"\u9810\u7b97\u66f8\": \"Budget\",\r\n    \"\u6c7a\u7b97\u66f8\": \"Year-end Financial\",\r\n    \"\u6703\u8a08\u5e2b\u67e5\u6838\u5831\u544a\u66f8\": \"CPA's Financial Audit\",\r\n    \"\u5167\u90e8\u63a7\u5236\u5efa\u8b70\u66f8\": \"Internal Audit Guidance\",\r\n    \"\u6574\u9ad4\u734e\u88dc\u52a9\u6b3e\u8cc7\u8a0a\": \"Overall Award and Subsidy Funds Information\",\r\n    \"\u6b77\u5e74\u734e\u88dc\u52a9\u6b3e\u4f7f\u7528\u8cc7\u6599\": \"Information on Previous Year's Utilization\",\r\n    \"\u6b77\u5e74\u734e\u88dc\u52a9\u6b3e\u4f7f\u7528\u6210\u6548\": \"Effectiveness in Previous Year's Utilization\",\r\n  };\r\n  const TERM_ALIASES = {\r\n    \/\/ \"FIN_REPORT_INFO\": \"Financial Report Information\",\r\n  };\r\n\r\n  let TYPE_LABEL = {};\r\n  let TYPES = [];\r\n  let TYPE_COLORS = {};\r\n  let TYPE_ICONS = {};\r\n  const PAGE_SIZE = 7;\r\n  const ASSET_BASE = \"\/wp-content\/uploads\/sites\/11\/2026\/01\/\";\r\n  const TYPE_ICON = {\r\n    \"monthly-financial-report-information\": ASSET_BASE + \"fin-1.webp\",\r\n    \"annual-deposit-financial-statements\": ASSET_BASE + \"fin-2.webp\",\r\n    \"physical-rehabilitation-subsidy-materials\": ASSET_BASE + \"fin-3.webp\",\r\n  };\r\n  const MONTHLY_SLUG = \"monthly-financial-report-information\";\r\n  let ITEMS = {};\r\n  let DATA = [];\r\n\r\n  const state = { type:null, item:\"ALL\", year:\"ALL\", month:\"ALL\", sort:\"date_desc\", page:1 };\r\n\r\n  const elList = root.querySelector(\"#fbList\");\r\n  const elCount = root.querySelector(\"#fbCount\");\r\n  const elSort = root.querySelector(\"#fbSort\");\r\n  const elTypeRow = root.querySelector(\"#fbTypeRow\");\r\n  const elItemGrid = root.querySelector(\"#fbItemGrid\");\r\n  const elYear = root.querySelector(\"#fbYear\");\r\n  const elMonthWrap = root.querySelector(\"#fbMonthWrap\");\r\n  const elMonth = root.querySelector(\"#fbMonth\");\r\n  const elReset = root.querySelector(\"#fbReset\");\r\n  const elActiveType = root.querySelector(\"#fbActiveType\");\r\n  const elPager = root.querySelector(\"#fbPager\");\r\n  const elLoading = root.querySelector(\"#fbLoading\");\r\n\r\n  function uniq(arr){ return Array.from(new Set(arr)); }\r\n  function pad2(n){ return String(n).padStart(2,\"0\"); }\r\n  function monthName(n){\r\n    const names = [\r\n      \"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\r\n      \"July\",\"August\",\"September\",\"October\",\"November\",\"December\"\r\n    ];\r\n    return names[n - 1] || String(n);\r\n  }\r\n  function formatAcademicYear(name){\r\n    const m = String(name).match(\/\\d+\/);\r\n    if(!m) return name;\r\n    const roc = Number(m[0]);\r\n    if(!roc) return name;\r\n    const start = roc + 1911;\r\n    return `${start}-${start + 1}`;\r\n  }\r\n  function yearSortValue(name){\r\n    const m = String(name).match(\/\\d+\/);\r\n    return m ? Number(m[0]) : 0;\r\n  }\r\n  function escapeHtml(str){\r\n    return String(str).replaceAll(\"&\",\"&amp;\").replaceAll(\"<\",\"&lt;\").replaceAll(\">\",\"&gt;\")\r\n      .replaceAll('\"',\"&quot;\").replaceAll(\"'\",\"&#039;\");\r\n  }\r\n  function safeClassName(value){\r\n    return String(value).toLowerCase().replace(\/[^a-z0-9]+\/g, \"-\").replace(\/(^-|-$)\/g, \"\");\r\n  }\r\n  function iconClass(t){ return `type-${safeClassName(t)}`; }\r\n  function iconText(label){\r\n    return String(label || \"\").slice(0, 1);\r\n  }\r\n  function slugToTitle(slug){\r\n    return String(slug || \"\")\r\n      .split(\"-\")\r\n      .filter(Boolean)\r\n      .map((word)=> word.charAt(0).toUpperCase() + word.slice(1))\r\n      .join(\" \");\r\n  }\r\n  function zValue(value){\r\n    const n = Number(value);\r\n    return Number.isFinite(n) ? n : 9999;\r\n  }\r\n  function getZIndex(acf){\r\n    if(!acf) return 9999;\r\n    if(Object.prototype.hasOwnProperty.call(acf, \"z-index\")) return zValue(acf[\"z-index\"]);\r\n    return zValue(acf.z_index);\r\n  }\r\n  function hexToRgb(hex){\r\n    const cleaned = String(hex || \"\").replace(\"#\", \"\");\r\n    if(cleaned.length !== 6) return null;\r\n    const num = Number.parseInt(cleaned, 16);\r\n    if(Number.isNaN(num)) return null;\r\n    return { r: (num >> 16) & 255, g: (num >> 8) & 255, b: num & 255 };\r\n  }\r\n  function rgba(hex, alpha){\r\n    const rgb = hexToRgb(hex);\r\n    if(!rgb) return \"\";\r\n    return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;\r\n  }\r\n  function adjustHex(hex, amount){\r\n    const rgb = hexToRgb(hex);\r\n    if(!rgb) return hex;\r\n    const clamp = (v)=> Math.max(0, Math.min(255, v));\r\n    const toHex = (v)=> clamp(v).toString(16).padStart(2, \"0\");\r\n    return `#${toHex(rgb.r + amount)}${toHex(rgb.g + amount)}${toHex(rgb.b + amount)}`;\r\n  }\r\n  function buildTypeColors(typeKey, acf = {}){\r\n    const fallback = DEFAULT_TYPE_COLORS[typeKey] || DEFAULT_TYPE_COLORS.__default || {};\r\n    const main = acf.color_main || fallback.main || \"#4868BB\";\r\n    const gradStart = acf.color_grad_start || (acf.color_main ? main : fallback.gradStart) || main;\r\n    const gradEnd = acf.color_grad_end || (acf.color_main ? main : fallback.gradEnd) || main;\r\n    const gradEndCopy = acf.color_grad_end_copy || (acf.color_main ? gradEnd : fallback.gradEndCopy) || gradEnd;\r\n    const border = adjustHex(main, -24);\r\n    const shadow = adjustHex(gradEndCopy, -20);\r\n    return {\r\n      main,\r\n      gradStart,\r\n      gradEnd,\r\n      gradEndCopy,\r\n      border,\r\n      beforeBg: gradEndCopy,\r\n      shadow,\r\n      hoverMain: adjustHex(main, 18),\r\n      hoverStart: adjustHex(gradStart, 12),\r\n      hoverEnd: adjustHex(gradEnd, 12),\r\n      soft: rgba(main, 0.12),\r\n      softBorder: rgba(main, 0.28),\r\n      chipBg: rgba(main, 0.04),\r\n      tagText: rgba(main, 0.7),\r\n      tagBorder: rgba(main, 0.25),\r\n      tagBg: rgba(main, 0.04),\r\n    };\r\n  }\r\n  function typeVars(typeKey){\r\n    const c = TYPE_COLORS[typeKey] || buildTypeColors(typeKey, {});\r\n    return [\r\n      `--t-main:${c.main}`,\r\n      `--t-border:${c.border}`,\r\n      `--t-before-bg:${c.beforeBg}`,\r\n      `--t-shadow:${c.shadow}`,\r\n      `--t-grad-start:${c.gradStart}`,\r\n      `--t-grad-end:${c.gradEnd}`,\r\n      `--t-grad-end-copy:${c.gradEndCopy}`,\r\n      `--t-hover-main:${c.hoverMain}`,\r\n      `--t-hover-start:${c.hoverStart}`,\r\n      `--t-hover-end:${c.hoverEnd}`,\r\n      `--t-soft:${c.soft}`,\r\n      `--t-soft-border:${c.softBorder}`,\r\n      `--t-chip-bg:${c.chipBg}`,\r\n      `--t-tag-text:${c.tagText}`,\r\n      `--t-tag-border:${c.tagBorder}`,\r\n      `--t-tag-bg:${c.tagBg}`,\r\n    ].join(\"; \");\r\n  }\r\n  function applyTypeTheme(typeKey){\r\n    const c = TYPE_COLORS[typeKey];\r\n    if(!c) return;\r\n    root.style.setProperty(\"--type-main\", c.main);\r\n    root.style.setProperty(\"--type-soft\", c.soft);\r\n    root.style.setProperty(\"--type-border\", c.tagBorder);\r\n  }\r\n  function chunkArray(list, size){\r\n    const out = [];\r\n    for(let i = 0; i < list.length; i += size){\r\n      out.push(list.slice(i, i + size));\r\n    }\r\n    return out;\r\n  }\r\n  function translateTerm(slugOrName, fallbackName){\r\n    const slug = String(slugOrName || \"\");\r\n    if(slug && TERM_ALIASES[slug]) return TERM_ALIASES[slug];\r\n    if(fallbackName && TERM_LABELS[fallbackName]) return TERM_LABELS[fallbackName];\r\n    if(slug) return slugToTitle(slug);\r\n    return fallbackName || slug;\r\n  }\r\n  function translateTitle(title, termMap){\r\n    let result = title;\r\n    result = result.replace(\/(\\d+)\\s*(\u5b78\u5e74\u5ea6|\u5e74\u5ea6)\/g, (match, roc)=>{\r\n      const formatted = formatAcademicYear(roc);\r\n      return formatted === roc ? match : formatted;\r\n    });\r\n    const keys = Array.from(termMap ? termMap.keys() : []).sort((a,b)=>b.length - a.length);\r\n    keys.forEach((key)=>{\r\n      result = result.split(key).join(termMap.get(key));\r\n    });\r\n    return result;\r\n  }\r\n  function uniqItems(items){\r\n    const byRaw = new Map();\r\n    items.forEach(item=>{\r\n      if(!byRaw.has(item.raw)) byRaw.set(item.raw, item);\r\n    });\r\n    return Array.from(byRaw.values());\r\n  }\r\n\r\n  function paginate(rows){\r\n    const totalPages = Math.max(1, Math.ceil(rows.length \/ PAGE_SIZE));\r\n    if(state.page > totalPages) state.page = totalPages;\r\n    const start = (state.page - 1) * PAGE_SIZE;\r\n    return { pageRows: rows.slice(start, start + PAGE_SIZE), totalPages };\r\n  }\r\n\r\n  function renderPager(totalPages){\r\n    if(totalPages <= 1){\r\n      elPager.innerHTML = \"\";\r\n      return;\r\n    }\r\n    const prevDisabled = state.page <= 1 ? \"disabled\" : \"\";\r\n    const nextDisabled = state.page >= totalPages ? \"disabled\" : \"\";\r\n    const pages = Array.from({length: totalPages}, (_, i)=> {\r\n      const p = i + 1;\r\n      const current = p === state.page ? 'aria-current=\"page\"' : \"\";\r\n      return `<button class=\"fb-page-btn\" type=\"button\" data-page=\"${p}\" ${current}>${p}<\/button>`;\r\n    }).join(\"\");\r\n    elPager.innerHTML = `\r\n      <button class=\"fb-page-btn\" type=\"button\" data-page=\"${state.page - 1}\" ${prevDisabled}>Prev<\/button>\r\n      ${pages}\r\n      <button class=\"fb-page-btn\" type=\"button\" data-page=\"${state.page + 1}\" ${nextDisabled}>Next<\/button>\r\n    `;\r\n  }\r\n\r\n  async function fetchAll(endpoint, params = {}){\r\n    const perPage = 100;\r\n    let page = 1;\r\n    let results = [];\r\n\r\n    while(true){\r\n      const url = new URL(`${REST_BASE}\/${endpoint}`);\r\n      url.searchParams.set(\"per_page\", String(perPage));\r\n      url.searchParams.set(\"page\", String(page));\r\n      Object.entries(params).forEach(([key, value])=>{\r\n        url.searchParams.set(key, String(value));\r\n      });\r\n\r\n      const res = await fetch(url.toString());\r\n      if(!res.ok){\r\n        throw new Error(`Fetch failed: ${endpoint} page ${page}`);\r\n      }\r\n      const batch = await res.json();\r\n      results = results.concat(batch);\r\n\r\n      const totalPages = Number(res.headers.get(\"X-WP-TotalPages\") || \"0\");\r\n      if(totalPages && page >= totalPages) break;\r\n      if(batch.length < perPage) break;\r\n      page += 1;\r\n    }\r\n\r\n    return results;\r\n  }\r\n\r\n  function buildFromRest(posts, cates, years){\r\n    const cateById = new Map(cates.map(c=>[c.id, c]));\r\n    const yearById = new Map(years.map(y=>[y.id, y]));\r\n    const topLevel = cates.filter(c=>!c.parent)\r\n      .slice()\r\n      .sort((a,b)=> getZIndex(a.acf) - getZIndex(b.acf));\r\n    const typeByTopId = new Map();\r\n    topLevel.forEach(c=>{\r\n      typeByTopId.set(c.id, c.slug);\r\n    });\r\n\r\n    const termMap = new Map();\r\n    Object.entries(TERM_LABELS).forEach(([key, value])=> termMap.set(key, value));\r\n    Object.entries(TERM_ALIASES).forEach(([key, value])=> termMap.set(key, value));\r\n\r\n    const typeLabel = {};\r\n    const types = [];\r\n    const typeColors = {};\r\n    const typeIcons = {};\r\n    topLevel.forEach(top=>{\r\n      const key = top.slug;\r\n      const label = translateTerm(top.slug, top.name);\r\n      typeLabel[key] = label;\r\n      types.push({ key, label });\r\n      typeColors[key] = buildTypeColors(key, top.acf || {});\r\n      const iconUrl = top.acf && top.acf.icon ? String(top.acf.icon) : \"\";\r\n      typeIcons[key] = iconUrl;\r\n      termMap.set(top.name, label);\r\n      termMap.set(top.slug, label);\r\n    });\r\n\r\n    const items = {};\r\n    types.forEach(t=>{ items[t.key] = []; });\r\n    cates.forEach(c=>{\r\n      if(!c.parent) return;\r\n      const parentKey = typeByTopId.get(c.parent);\r\n      if(parentKey){\r\n        const iconUrl = c.acf && c.acf.icon ? String(c.acf.icon) : \"\";\r\n        const label = translateTerm(c.slug, c.name);\r\n        items[parentKey].push({\r\n          raw: c.name,\r\n          slug: c.slug,\r\n          label,\r\n          iconUrl,\r\n          z: getZIndex(c.acf),\r\n        });\r\n        termMap.set(c.name, label);\r\n        termMap.set(c.slug, label);\r\n      }\r\n    });\r\n    Object.keys(items).forEach(key=>{\r\n      items[key] = uniqItems(items[key]).sort((a,b)=> {\r\n        const byZ = zValue(a.z) - zValue(b.z);\r\n        return byZ || a.label.localeCompare(b.label,\"en\");\r\n      });\r\n    });\r\n\r\n    const data = posts.map(p=>{\r\n      const cateIds = Array.isArray(p[\"fin-disclosure-cate\"]) ? p[\"fin-disclosure-cate\"] : [];\r\n      const yearIds = Array.isArray(p[\"fin-disclosure-year\"]) ? p[\"fin-disclosure-year\"] : [];\r\n      const cate = cateIds.map(id=>cateById.get(id)).find(Boolean);\r\n      const year = yearIds.map(id=>yearById.get(id)).find(Boolean);\r\n      const top = cate ? cateById.get(cate.parent) : null;\r\n      const typeKey = top ? typeByTopId.get(top.id) : null;\r\n      const iconUrl = cate && cate.acf && cate.acf.icon ? String(cate.acf.icon) : \"\";\r\n\r\n      return {\r\n        type: typeKey,\r\n        itemRaw: cate ? cate.name : \"\",\r\n        itemLabel: cate ? translateTerm(cate.slug, cate.name) : \"\",\r\n        itemIconUrl: iconUrl,\r\n        yearRaw: year ? year.name : \"\",\r\n        yearLabel: year ? formatAcademicYear(year.name) : \"\",\r\n        month: p.acf && p.acf.month ? Number(p.acf.month) : null,\r\n        title: p.title && p.title.rendered ? p.title.rendered : \"\",\r\n        titleLabel: p.title && p.title.rendered ? translateTitle(p.title.rendered, termMap) : \"\",\r\n        url: p.acf && p.acf.url_link ? p.acf.url_link : \"\",\r\n        urlEn: p.acf && p.acf.url_link_en ? p.acf.url_link_en : \"\",\r\n        date: p.date ? String(p.date).slice(0, 10) : \"\",\r\n      };\r\n    }).filter(d=>d.type && d.itemRaw && d.yearRaw);\r\n\r\n    return { typeLabel, types, items, data, typeColors, typeIcons };\r\n  }\r\n\r\n  function renderTypeRow(){\r\n    elTypeRow.innerHTML = TYPES.map(t=>{\r\n      const pressed = state.type===t.key ? \"true\" : \"false\";\r\n      const icon = TYPE_ICONS[t.key] || TYPE_ICON[t.key];\r\n      const iconHtml = icon\r\n        ? `<img src=\"${icon}\" alt=\"\">`\r\n        : iconText(t.label);\r\n      return `\r\n        <button class=\"type-card has-theme ${iconClass(t.key)}\" type=\"button\" data-type=\"${t.key}\" aria-pressed=\"${pressed}\" style=\"${typeVars(t.key)}\">\r\n          <div class=\"type-badge ${iconClass(t.key)}\">${iconHtml}<\/div>\r\n          <div class=\"type-name\">${escapeHtml(t.label)}<\/div>\r\n        <\/button>\r\n      `;\r\n    }).join(\"\");\r\n  }\r\n\r\n  function renderItemGrid(){\r\n    const items = ITEMS[state.type] || [];\r\n    const allPressed = state.item===\"ALL\" ? \"true\":\"false\";\r\n    const allCard = `\r\n      <button class=\"item-card has-theme all ${iconClass(state.type)}\" type=\"button\" data-item=\"ALL\" aria-pressed=\"${allPressed}\" style=\"${typeVars(state.type)}\">\r\n        <div class=\"txt\">All items<\/div>\r\n      <\/button>\r\n    `;\r\n    const cards = items.map(item=>{\r\n      const pressed = state.item===item.raw ? \"true\":\"false\";\r\n      const iconSrc = item.iconUrl || (ASSET_BASE + encodeURIComponent(item.raw) + \".png\");\r\n      return `\r\n        <button class=\"item-card has-theme ${iconClass(state.type)}\" type=\"button\" data-item=\"${escapeHtml(item.raw)}\" aria-pressed=\"${pressed}\" style=\"${typeVars(state.type)}\">\r\n          <img class=\"item-thumb\" src=\"${iconSrc}\" alt=\"\">\r\n          <div class=\"txt\">${escapeHtml(item.label)}<\/div>\r\n        <\/button>\r\n      `;\r\n    }).join(\"\");\r\n    elItemGrid.innerHTML = allCard + cards;\r\n  }\r\n\r\n  function rebuildYearMonth(){\r\n    const years = uniq(DATA.filter(d=>d.type===state.type).map(d=>d.yearRaw));\r\n    const sortedYears = years.sort((a,b)=>yearSortValue(b)-yearSortValue(a));\r\n    elYear.innerHTML = `<option value=\"ALL\">All academic years<\/option>` + sortedYears.map(y=>`<option value=\"${y}\">${formatAcademicYear(y)}<\/option>`).join(\"\");\r\n    elYear.value = state.year;\r\n\r\n    const isMonthly = state.type===MONTHLY_SLUG;\r\n    elMonthWrap.style.display = isMonthly ? \"block\" : \"none\";\r\n    if(isMonthly){\r\n      const months = uniq(DATA.filter(d=>d.type===MONTHLY_SLUG).map(d=>d.month).filter(Boolean)).sort((a,b)=>a-b);\r\n      elMonth.innerHTML = `<option value=\"ALL\">All months<\/option>` + months.map(m=>`<option value=\"${m}\">${monthName(m)}<\/option>`).join(\"\");\r\n      elMonth.value = state.month;\r\n    }\r\n  }\r\n\r\n  function filtered(){\r\n    let rows = DATA\r\n      .filter(d=>d.type===state.type)\r\n      .filter(d=>state.item===\"ALL\" ? true : d.itemRaw===state.item)\r\n      .filter(d=>state.year===\"ALL\" ? true : String(d.yearRaw)===String(state.year))\r\n      .filter(d=>state.type!==MONTHLY_SLUG || state.month===\"ALL\" ? true : String(d.month)===String(state.month));\r\n\r\n    if(state.sort===\"date_desc\") rows.sort((a,b)=> (b.date||\"\").localeCompare(a.date||\"\"));\r\n    if(state.sort===\"date_asc\")  rows.sort((a,b)=> (a.date||\"\").localeCompare(b.date||\"\"));\r\n    return rows;\r\n  }\r\n\r\n  function rowKey(d){\r\n    const y = d.yearRaw ?? \"\";\r\n    const m = d.month ? String(d.month).padStart(2,\"0\") : \"\";\r\n    return `${d.type}|${d.itemRaw}|${y}|${m}|${d.title}`;\r\n  }\r\n\r\n  function renderList(){\r\n    const rows = filtered();\r\n    const { pageRows, totalPages } = paginate(rows);\r\n    elCount.textContent = `Total ${rows.length} items (${TYPE_LABEL[state.type]}) \u00b7 Page ${state.page} \/ ${totalPages}`;\r\n\r\n    if(!rows.length){\r\n      elList.innerHTML = `<div class=\"fb-empty\">No results match your filters (try reset or change filters).<\/div>`;\r\n      elPager.innerHTML = \"\";\r\n      return;\r\n    }\r\n\r\n    elList.innerHTML = pageRows.map(d=>{\r\n      const tags = [\r\n        `<span class=\"fb-tag ${iconClass(d.type)}\">Academic Year: ${escapeHtml(d.yearLabel)}<\/span>`,\r\n        d.type===MONTHLY_SLUG ? `<span class=\"fb-tag ${iconClass(d.type)}\">Month: ${escapeHtml(monthName(d.month))}<\/span>` : \"\",\r\n        `<span class=\"fb-tag ${iconClass(d.type)}\">Item: ${escapeHtml(d.itemLabel)}<\/span>`,\r\n        `<span class=\"fb-tag ${iconClass(d.type)}\">Type: ${escapeHtml(TYPE_LABEL[d.type])}<\/span>`\r\n      ].filter(Boolean).join(\"\");\r\n\r\n      const hasEnLink = !!(d.urlEn && String(d.urlEn).trim());\r\n      const hasChLink = !!(d.url && String(d.url).trim());\r\n      const actionHref = hasEnLink ? d.urlEn : (hasChLink ? d.url : \"\");\r\n      const actionText = hasEnLink ? \"View\" : (hasChLink ? \"View (CH)\" : \"\");\r\n      const actionHtml = actionHref\r\n        ? '<a class=\"fb-link\" href=\"' + actionHref + '\" target=\"_blank\" rel=\"noopener\"><img class=\"fb-hand\" src=\"' + ASSET_BASE + 'finger.png\" alt=\"\">' + actionText + '<\/a>'\r\n        : `<span style=\"font-size:13px;color:var(--muted);font-weight:700;\">\u2014<\/span>`;\r\n\r\n      const itemIcon = d.itemIconUrl || (ASSET_BASE + encodeURIComponent(d.itemRaw) + \".png\");\r\n      return `\r\n        <div class=\"fb-item\" data-type=\"${d.type}\" style=\"${typeVars(d.type)}\">\r\n          <div class=\"fb-ico ${iconClass(d.type)}\"><img src=\"${itemIcon}\" alt=\"\"><\/div>\r\n\r\n          <div class=\"fb-main\">\r\n            <p class=\"fb-title2\"><strong>${escapeHtml(d.titleLabel || d.title)}<\/strong><\/p>\r\n            <div class=\"fb-meta\">\r\n              <div class=\"fb-tags\">${tags}<\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"fb-actions\">\r\n            ${actionHtml}\r\n            <span class=\"fb-date\">${d.date ? `Published: ${escapeHtml(d.date)}` : \"\"}<\/span>\r\n          <\/div>\r\n          <svg class=\"fb-dash\" aria-hidden=\"true\">\r\n            <rect class=\"fb-dash-rect\" x=\"1\" y=\"1\"><\/rect>\r\n          <\/svg>\r\n        <\/div>\r\n      `;\r\n    }).join(\"\");\r\n    renderPager(totalPages);\r\n  }\r\n\r\n  function renderActiveType(){\r\n    applyTypeTheme(state.type);\r\n    const label = TYPE_LABEL[state.type] || \"\";\r\n    const wave = String(label).split(\"\").map((ch, i)=>`\r\n      <span class=\"wave\" style=\"animation-delay:${i * 0.05}s\">${escapeHtml(ch)}<\/span>\r\n    `).join(\"\");\r\n    elActiveType.innerHTML = `\r\n      <span style=\"opacity:.75;font-weight:900;\">You are viewing<\/span>\r\n      <span class=\"chip ${iconClass(state.type)}\" style=\"${typeVars(state.type)}\"><span class=\"dot\"><\/span>${wave}<\/span>\r\n    `;\r\n  }\r\n\r\n  \/\/ events (filters)\r\n  elTypeRow.addEventListener(\"click\", (e)=>{\r\n    const b = e.target.closest(\"button[data-type]\");\r\n    if(!b) return;\r\n    state.type = b.dataset.type;\r\n    state.item=\"ALL\"; state.year=\"ALL\"; state.month=\"ALL\";\r\n    state.page=1;\r\n    renderTypeRow();\r\n    renderItemGrid();\r\n    rebuildYearMonth();\r\n    renderList();\r\n    renderActiveType();\r\n  });\r\n\r\n  elItemGrid.addEventListener(\"click\", (e)=>{\r\n    const b = e.target.closest(\"button[data-item]\");\r\n    if(!b) return;\r\n    state.item = b.dataset.item===\"ALL\" ? \"ALL\" : b.dataset.item;\r\n    state.page=1;\r\n    renderItemGrid();\r\n    renderList();\r\n  });\r\n\r\n  elYear.addEventListener(\"change\", ()=>{ state.year=elYear.value; state.page=1; renderList(); });\r\n  elMonth.addEventListener(\"change\", ()=>{ state.month=elMonth.value; state.page=1; renderList(); });\r\n  elSort.addEventListener(\"change\", ()=>{ state.sort=elSort.value; state.page=1; renderList(); });\r\n\r\n  elReset.addEventListener(\"click\", ()=>{\r\n    state.item=\"ALL\"; state.year=\"ALL\"; state.month=\"ALL\"; state.sort=\"date_desc\";\r\n    state.page=1;\r\n    elSort.value=\"date_desc\";\r\n    renderTypeRow();\r\n    renderItemGrid();\r\n    rebuildYearMonth();\r\n    renderList();\r\n    renderActiveType();\r\n  });\r\n  elPager.addEventListener(\"click\", (e)=>{\r\n    const b = e.target.closest(\"button[data-page]\");\r\n    if(!b || b.disabled) return;\r\n    state.page = Number(b.dataset.page);\r\n    renderList();\r\n  });\r\n\r\n  \/\/ init\r\n  (async ()=>{\r\n    try{\r\n      if(elLoading) elLoading.classList.remove(\"is-hidden\");\r\n      const [posts, cates, years] = await Promise.all([\r\n        fetchAll(REST_ENDPOINTS.posts),\r\n        fetchAll(REST_ENDPOINTS.cate),\r\n        fetchAll(REST_ENDPOINTS.year),\r\n      ]);\r\n      const built = buildFromRest(posts, cates, years);\r\n      TYPE_LABEL = built.typeLabel;\r\n      TYPES = built.types;\r\n      ITEMS = built.items;\r\n      DATA = built.data;\r\n      TYPE_COLORS = built.typeColors;\r\n      TYPE_ICONS = built.typeIcons;\r\n\r\n      state.type = TYPES[0] ? TYPES[0].key : MONTHLY_SLUG;\r\n      state.item = \"ALL\";\r\n      state.year = \"ALL\";\r\n      state.month = \"ALL\";\r\n      state.page = 1;\r\n\r\n      renderTypeRow();\r\n      renderItemGrid();\r\n      rebuildYearMonth();\r\n      renderList();\r\n      renderActiveType();\r\n      if(elLoading) elLoading.classList.add(\"is-hidden\");\r\n    }catch(err){\r\n      console.error(err);\r\n      elList.innerHTML = `<div class=\"fb-empty\">Failed to load data. Please try again later.<\/div>`;\r\n      elCount.textContent = \"\";\r\n      elPager.innerHTML = \"\";\r\n      if(elLoading) elLoading.classList.add(\"is-hidden\");\r\n    }\r\n  })();\r\n})();\r\n<\/script>\r\n\n<!-- \/end HFCM by 99 Robots -->\n<\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Loading&#8230; Newest first Oldest first Information Type Item Academic YearAuto-generated from data MonthMonthly reports only Reset<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-blank-4.php","meta":{"_themeisle_gutenberg_block_has_review":false,"_vp_format_video_url":"","_vp_image_focal_point":[]},"acf":[],"_links":{"self":[{"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/pages\/12229"}],"collection":[{"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/comments?post=12229"}],"version-history":[{"count":6,"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/pages\/12229\/revisions"}],"predecessor-version":[{"id":12591,"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/pages\/12229\/revisions\/12591"}],"wp:attachment":[{"href":"https:\/\/control.mcu.edu.tw\/en\/wp-json\/wp\/v2\/media?parent=12229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}