/* ============================================================================
   我的課程（個人專區）— Figma #2012 前台 - 個人專區 (我的課程) 12140:125916
   尺寸皆為 Figma 1920 畫框實測值；頁面沿用 Portal 的全頁 zoom（≥1440 0.83／0.875），
   因此與首頁、探索頁同比例。前綴 myc- 避免與首頁「我的課程」區塊 .mc-* 衝突。
   ============================================================================ */
:root{
  --myc-primary:#1f7a73;            /* primary */
  --myc-on-surface:#24364d;         /* on-surface */
  --myc-hi:#000;                    /* on-surface-high-emphasis */
  --myc-mid:rgba(0,0,0,.6);         /* on-surface-medium-emphasis */
  --myc-dis:rgba(0,0,0,.35);        /* on-surface-disabled */
  --myc-line:rgba(0,0,0,.08);       /* opacity-8 */
  --myc-success:#088806; --myc-on-success-c:#005300; --myc-success-c:#def5d6; --myc-on-success:#f7fdf1;
  --myc-error:#db352e;   --myc-on-error-c:#c52821;   --myc-error-c:#ffe0db;
  --myc-surface2:#edf0f4;
  --myc-elev4:0 7px 8px -4px rgba(0,0,0,.04),0 5px 22px 4px rgba(0,0,0,.04),0 12px 17px 2px rgba(0,0,0,.04);
}

/* ---------- 字型角色（依 Design System §3.1）----------
   繁體中文（預設）Noto Sans TC 優先｜數字、英／數 Inter 優先（.num）｜英文 Arial 優先（.en、lang=en）｜多語系 Noto Sans
   中文句子內的數字／英文由 design-system/font-roles.js 自動標記（body[data-font-roles]）。 */
html,body{font-family:'Noto Sans TC','Inter',Arial,sans-serif}   /* Portal 頁內樣式在 body 指定 Inter 優先，需一併覆寫 */
html:lang(en),html:lang(en) body{font-family:Arial,'Noto Sans TC',sans-serif}
[lang]:not(:lang(zh)):not(:lang(en)){font-family:'Noto Sans',"Noto Sans TC",sans-serif}
.num{font-family:'Inter','Noto Sans TC',sans-serif}
.en{font-family:Arial,'Noto Sans TC',sans-serif}

/* ---------- 版面：頁面外框、篩選卡、結果列皆沿用探索頁既有 class；此處只補新內容 ---------- */
/* 日期區間（新內容）：外觀用探索頁膠囊欄位 class，這裡只隱藏原生日曆鈕、保留右側 calendar 圖示 */
.myc-date::placeholder{color:#94a3b8}
.myc-date{color:#24364d}
.myc-dp{transition:border-color .15s ease}
.myc-dp:hover,.myc-dp.is-open{border-color:var(--primary,#1f7a73)}
.myc-dp-btn{display:grid;place-items:center;width:32px;height:32px;margin-right:-6px;border:0;border-radius:9999px;background:transparent;color:rgba(0,0,0,.4);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.myc-dp-btn:hover,.myc-dp.is-open .myc-dp-btn{background:#e7f2f1;color:#1f7a73}
.myc-dp-btn:focus-visible{outline:2px solid #1f7a73;outline-offset:2px;border-radius:9999px}
.myc-date:focus-visible{outline:none}                         /* 日期欄不畫內框；聚焦由外框 .myc-dp:focus-within 變色表示 */
.myc-dp:focus-within{border-color:var(--primary,#1f7a73)}

/* 日曆選擇器彈窗（Tailwind datepicker 樣式；外框同 Portal 下拉選單：12px 圓角、白底、0 12px 30px 陰影）*/
.myc-cal{position:absolute;top:calc(100% + 6px);left:0;z-index:35;width:320px;max-width:calc(100vw - 32px);padding:16px;border-radius:12px;background:#fff;
  border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 30px rgba(16,24,40,.18);font-family:'Noto Sans TC','Inter',Arial,sans-serif;cursor:default}
.myc-cal[hidden]{display:none}
.myc-cal.to-right{left:auto;right:0}
.myc-cal__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.myc-cal__title{font-size:16px;font-weight:700;color:#24364d}
.myc-cal__title .num{font-family:'Inter','Noto Sans TC',sans-serif}
.myc-cal__nav{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9999px;background:transparent;color:#475569;cursor:pointer}
.myc-cal__nav:hover{background:#f1f5f9;color:#24364d}
.myc-cal__nav:focus-visible,.myc-cal__day:focus-visible,.myc-cal__ft button:focus-visible{outline:2px solid #1f7a73;outline-offset:1px}
.myc-cal__nav .ico{font-size:22px}
.myc-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.myc-cal__wd{height:32px;display:grid;place-items:center;font-size:13px;font-weight:500;color:#94a3b8}
.myc-cal__cell{position:relative;display:grid;place-items:center;height:40px}
.myc-cal__cell.in-range::before{content:"";position:absolute;inset:4px 0;background:#e7f2f1}
.myc-cal__cell.range-start::before{left:50%}
.myc-cal__cell.range-end::before{right:50%}
.myc-cal__cell.range-start.range-end::before{display:none}
.myc-cal__day{position:relative;z-index:1;width:36px;height:36px;border:0;border-radius:9999px;background:transparent;cursor:pointer;
  font:500 15px/1 'Inter','Noto Sans TC',sans-serif;color:#24364d;transition:background-color .12s ease,color .12s ease}
.myc-cal__day:hover{background:#f1f5f9}
.myc-cal__day.is-out{color:#94a3b8}
.myc-cal__day.is-today{box-shadow:inset 0 0 0 1.5px #1f7a73;color:#1f7a73;font-weight:700}
.myc-cal__day.is-sel,.myc-cal__day.is-sel:hover{background:#1f7a73;color:#fff;font-weight:700;box-shadow:none}
.myc-cal__day:disabled{color:#cbd5e1;cursor:not-allowed;background:transparent}
.myc-cal__ft{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.08)}
.myc-cal__ft button{height:36px;padding:0 14px;border:0;border-radius:9999px;background:transparent;cursor:pointer;font-size:15px;font-weight:700}
.myc-cal__today{color:#1f7a73}
.myc-cal__today:hover{background:#e7f2f1}
.myc-cal__clear{color:#64748b}
.myc-cal__clear:hover{background:#f1f5f9;color:#24364d}

/* ---------- 表格卡 ---------- */
.myc-tablewrap{position:relative}
.myc-scroll{overflow-x:auto;overflow-y:visible;border-radius:4px 4px 0 0;scrollbar-width:thin;scrollbar-color:#c4c9d1 transparent}   /* 捲軸緊貼表格下緣：不加下內距 */
.myc-scroll::-webkit-scrollbar{height:12px}
.myc-scroll::-webkit-scrollbar-thumb{background:#c4c9d1;border-radius:99px;border:3px solid #fff}
.myc-scroll::-webkit-scrollbar-track{background:transparent}
.myc-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;font-family:'Noto Sans TC','Inter',Arial,sans-serif}
.myc-table th{background:var(--myc-primary);color:#fff;height:64px;padding:0 16px;font:700 18px/1 'Noto Sans TC',sans-serif;letter-spacing:.0014em;
  text-align:left;white-space:nowrap;border-bottom:1px solid var(--myc-line)}
/* 欄位標題一律 18px Bold（原 .sm 16px 已移除，同位階同字級）*/
.myc-table .myc-na{font-family:'Noto Sans TC',sans-serif}   /* 空值「-」各欄同字型 */
.myc-table th.c{text-align:center}
.myc-table th:first-child{border-top-left-radius:4px}
.myc-th{display:inline-flex;align-items:center;gap:8px}
.myc-sortbtn{display:inline-grid;place-items:center;width:20px;height:20px;border:0;padding:0;background:transparent;color:#fff;cursor:pointer;border-radius:4px}
.myc-sortbtn:hover{background:rgba(255,255,255,.16)}
.myc-sortbtn:focus-visible,.myc-infobtn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.myc-sortbtn .ico,.myc-infobtn .ico{font-size:20px;line-height:1}
.myc-sortbtn[data-dir="asc"] .ico,.myc-sortbtn[data-dir="desc"] .ico{color:#d3f4ed}
.myc-infobtn{display:inline-grid;place-items:center;width:20px;height:20px;border:0;padding:0;background:transparent;color:#fff;cursor:help;position:relative}
.myc-table td{height:136px;padding:16px;border-bottom:1px solid var(--myc-line);vertical-align:middle;
  font:400 18px/1.46 'Noto Sans TC','Inter',Arial,sans-serif;letter-spacing:.0014em;color:var(--myc-hi);background:#fff;text-wrap:pretty}   /* 避免課程名稱末行孤字 */
.myc-table td.c{text-align:center}
.myc-table td.num{font-family:'Inter','Noto Sans TC',sans-serif}
.myc-table td.nowrap{white-space:nowrap}
.myc-table td.trunc>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.myc-table tr.is-off td:not(.myc-act):not(.myc-status):not(.myc-prog){color:var(--myc-dis)}
.myc-table tbody tr:hover td{background:#fbfcfd}

/* 欄寬（Figma min-width）*/
.w-70{width:70px;min-width:70px}.w-140{min-width:140px}.w-160{min-width:160px}.w-180{min-width:180px}.w-200{min-width:200px}
.w-220{min-width:220px}.w-280{min-width:200px;max-width:280px}.w-340{min-width:340px}.w-360{min-width:360px;max-width:420px}.w-480{min-width:480px}

/* 課程名稱 + badge */
.myc-title{display:inline;font:700 20px/1.5 'Noto Sans TC','Inter',Arial,sans-serif;   /* 課程名稱：18→20px（加大一級，2XL）*/
  color:var(--myc-on-surface);text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;letter-spacing:.0014em}
.myc-title:hover{color:var(--myc-primary)}
.myc-title:focus-visible{outline:2px solid var(--myc-primary);outline-offset:2px;border-radius:2px}
.is-off .myc-title{color:var(--myc-dis)}
.myc-table td.myc-name{font:700 20px/1.5 'Noto Sans TC','Inter',Arial,sans-serif;color:var(--myc-on-surface)}   /* 組裝課程列表的課程名稱：與其他表格課程名稱同級（20px Bold、on-surface），非連結故不加底線 */
.is-off .myc-title:hover{color:rgba(0,0,0,.55)}
.myc-badges{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.myc-badge{display:inline-flex;align-items:center;gap:4px;height:24px;padding:4px 8px;border-radius:4px;font:700 14px/1 'Noto Sans TC',sans-serif;letter-spacing:.0014em;white-space:nowrap}
.myc-badge img{width:16px;height:16px;display:block}
.myc-badge .ico{font-size:16px}
.myc-badge.warn{background:var(--myc-error-c);color:var(--myc-on-error-c)}
.myc-badge.off{background:var(--myc-surface2);color:var(--myc-dis)}
.myc-badge.sub{background:var(--myc-on-surface);color:#fff}

/* 課程進度 stepper（時數 → 測驗 → 問卷）*/
.myc-steps{position:relative;display:flex;justify-content:space-between;align-items:flex-start;min-width:168px}
/* 進度連接線：原本用 3px 高色塊，頁面縮放 0.83／0.875 後為 2.5px 非整數，各列依所在 y 位置被取整成 2 或 3px，粗細不一。
   改用 border-top 畫線：框線寬度一律取整為同一值，每列粗細一致 */
.myc-steps::before,.myc-steps::after{content:"";position:absolute;top:8.35px;height:0;border-top:3px solid #e3e1ec;opacity:.8}
.myc-steps::before{left:24px;right:calc(50% + 12px)}
.myc-steps::after{left:calc(50% + 12px);right:24px}
.myc-steps.s1::before,.myc-steps.s2::before,.myc-steps.s2::after{border-top-color:#45bcae}
.myc-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:48px;font:400 14px/1 'Noto Sans TC',sans-serif;color:var(--myc-dis)}
.myc-step i{display:grid;place-items:center;width:20px;height:20px;background:#fff;border-radius:50%}
.myc-step .ico{font-size:20px;line-height:1}
.myc-step.on,.myc-step.cur{color:var(--myc-primary);font-weight:700}
.myc-step.on .ico,.myc-step.cur .ico{color:var(--myc-primary)}
.myc-step.off .ico{color:#a3a6b1}
/* 課程進度標籤（時數／測驗／問卷）清晰度：實際顯示 ≥14px（同上傳狀態的縮放補償：≥1440 縮 0.83→17px、<1440 縮 0.875→16px）；
   未完成步驟字色由 disabled 35% 提高為 medium-emphasis 60%（5.7:1），已完成維持 primary 粗體 */
.myc-step{font-size:13px;color:var(--myc-mid);width:52px}   /* 依需求再小 0.5 級（-1px）*/
@media (min-width:1440px){.myc-step{font-size:16px}}
@media (max-width:1439.98px){.myc-step{font-size:15px}}
.myc-steps{min-width:180px}

/* 學習狀態（點擊開啟課程通過狀態卡）*/
.myc-status{position:relative;white-space:nowrap}
.myc-stbtn{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;padding:4px 6px;border-radius:6px;cursor:pointer;font:700 18px/1.46 'Noto Sans TC',sans-serif;letter-spacing:.0014em}
.myc-stbtn:hover{background:rgba(0,0,0,.04)}
.myc-stbtn:focus-visible{outline:2px solid var(--myc-primary);outline-offset:1px}
.myc-stbtn .ico{font-size:20px}
.myc-stbtn.pass{color:var(--myc-on-success-c)} .myc-stbtn.pass .ico{color:var(--myc-success)}
.myc-stbtn.fail{color:var(--myc-on-error-c)} .myc-stbtn.fail .ico{color:var(--myc-error)}

/* 課程通過狀態卡 368×136 */
.myc-pass{position:absolute;z-index:40;width:368px;border-radius:16px;overflow:hidden;background:#fcfcff;border:1px solid rgba(0,0,0,.2);box-shadow:var(--myc-elev4);
  text-align:left;white-space:normal}
.myc-pass[hidden]{display:none}
.myc-pass__hd{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 16px;color:#fff}
.myc-pass.pass .myc-pass__hd{background:var(--myc-success)}
.myc-pass.fail .myc-pass__hd{background:var(--myc-error)}
.myc-pass__hd b{font:700 14px/1.7 'Noto Sans TC',sans-serif;color:var(--myc-on-success)}
.myc-pass.fail .myc-pass__hd b{color:#fff}
.myc-pass__chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:2px 12px 2px 6px;border-radius:99px;font:700 13px/1.7 'Noto Sans TC',sans-serif;margin-left:12px}
.myc-pass.pass .myc-pass__chip{background:var(--myc-success-c);color:var(--myc-on-success-c)}
.myc-pass.fail .myc-pass__chip{background:var(--myc-error-c);color:var(--myc-on-error-c)}
.myc-pass__chip .ico{font-size:16px}
.myc-pass__rule{display:inline-flex;align-items:center;gap:4px;font:700 12px/1.3 'Noto Sans TC',sans-serif;color:#fff;border:0;background:transparent;cursor:help;padding:0}
.myc-pass__rule .ico{font-size:16px}
.myc-pass__x{display:grid;place-items:center;width:24px;height:24px;border:0;padding:0;background:transparent;color:#fff;cursor:pointer;border-radius:4px;margin-left:4px}
.myc-pass__x:hover{background:rgba(255,255,255,.18)}
.myc-pass__x:focus-visible,.myc-pass__rule:focus-visible{outline:2px solid #fff}
.myc-pass__x .ico{font-size:24px}
.myc-pass__bd{display:flex;gap:8px;padding:10px 16px 16px}
.myc-pass__it{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:16px;background:var(--myc-surface2)}
.myc-pass__it.ok{background:var(--myc-success-c)}
.myc-pass__it span{display:inline-flex;align-items:center;font:400 14px/1.3 'Noto Sans TC',sans-serif;color:var(--myc-mid)}
.myc-pass__it span img{width:24px;height:24px;padding:4.5px}
.myc-pass__it.ok span{color:var(--myc-on-success-c)}
.myc-pass__it b{font:700 16px/1.48 'Noto Sans TC',sans-serif;color:var(--myc-on-surface);letter-spacing:.0014em}
.myc-pass__it b.num{font-family:'Inter',sans-serif}
.myc-pass__it.ok b{color:var(--myc-on-success-c)}

/* 認證時數上傳狀態 */
.myc-up{display:flex;flex-direction:column;gap:8px}
.myc-up>div{display:flex;align-items:center;gap:6px;min-width:0}
/* 認證時數類別 tag：與篩選區「認證時數類別」chip（.exf-chip.exc-*）同一套樣式——高 28、膠囊圓角、無框線、16px Medium(500)、
   同色票（終身學習 #D3F4ED/#1E6762、環境教育 #E0F2FE/#0369A1、教師研習 #EDE9FE/#6D28D9）；表格內不可移除，故無 × 鈕、左右內距 12 */
.myc-cat{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:9999px;border:0;
  font:500 16px/1 'Noto Sans TC','Inter',Arial,sans-serif;letter-spacing:normal;white-space:nowrap;
  background:#d3f4ed;color:#1e6762}
.myc-cat.sky{background:#e0f2fe;color:#0369a1}
.myc-cat.violet{background:#ede9fe;color:#6d28d9}
.myc-up em{font-style:normal;display:inline-flex;align-items:center;gap:4px;font:700 14px/1.3 'Noto Sans TC','Inter',Arial,sans-serif;color:var(--myc-mid);white-space:nowrap}
.myc-up em .ico{font-size:16px;color:var(--myc-success)}
.myc-up small{font:400 14px/1.3 'Noto Sans TC','Inter',Arial,sans-serif;color:var(--myc-mid);white-space:nowrap}
/* 上傳狀態（已上傳／處理中／預計完成日）實際顯示需 ≥14px：Portal 頁面在 1440–1919 縮放 0.83、<1440 縮放 0.875，
   14px 會被縮成 11.6／12.3px → 依縮放補償（17px×0.83＝14.1、16px×0.875＝14.0）；≥1920 Portal 同樣縮放 0.83 */
@media (min-width:1440px){.myc-up em,.myc-up small{font-size:17px}.myc-up em .ico{font-size:19px}}
@media (max-width:1439.98px){.myc-up em,.myc-up small{font-size:16px}.myc-up em .ico{font-size:18px}}
.myc-down{color:var(--myc-error)}

/* 操作欄：固定右側 70px，左緣陰影（Figma Rectangle 34624146 40px）*/
.myc-table .myc-act{position:sticky;right:0;z-index:2;width:70px;min-width:70px;max-width:70px;padding:0;text-align:center}
.myc-table th.myc-act{z-index:3}
.myc-table td.myc-act::before,.myc-table th.myc-act::before{content:"";position:absolute;top:0;bottom:-1px;left:-40px;width:40px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 100%);opacity:0;transition:opacity .2s ease}
.myc-tablewrap.can-r .myc-act::before{opacity:1}
.myc-more{display:inline-grid;place-items:center;width:32px;height:32px;border:0;padding:0;border-radius:6px;background:transparent;color:var(--myc-hi);cursor:pointer}
.myc-more:hover,.myc-more[aria-expanded="true"]{background:var(--myc-surface2)}
.myc-more:focus-visible{outline:2px solid var(--myc-primary);outline-offset:1px}
.myc-more .ico{font-size:24px}

/* 操作下拉（sys / dropdown_select_list：查看／退選）*/
.myc-menu{position:fixed;z-index:70;min-width:106px;background:#fff;border-radius:4px;padding:0;overflow:hidden;
  box-shadow:0 0 1.5px rgba(0,0,0,.12),0 2px .5px rgba(0,0,0,.08),0 1px .5px rgba(0,0,0,.08),0 8px 18px rgba(0,0,0,.08)}
.myc-menu[hidden]{display:none}
.myc-menu button{display:block;width:100%;padding:10px 12px;border:0;background:#fff;text-align:left;cursor:pointer;font:400 16px/1.48 'Noto Sans TC',sans-serif;color:var(--myc-hi)}
.myc-menu button:hover,.myc-menu button:focus-visible{background:rgba(0,0,0,.04);outline:none}
.myc-menu button.danger{color:var(--myc-on-error-c);font-weight:700}

/* Tooltip：比照 Figma UI Library「sys / tooltip」（FUSZ9w9dJWB2DJUTUEiGVW 103:4837）
   body：黑 80%、圓角 6、內距 8/12、M/Bold 14px 行高 1.7、白字、不折行；三角 12×8，離 body 外緣 8px
   變體：data-pos＝三角所在邊 top／bottom／left／right（sideway）；data-dir＝三角水平位置 center／left（距左 12）／right（距右 12）
   長句（MOOCs 說明、通過條件）依我的課程 Figma 固定 208 寬折行 */
.myc-tip{position:fixed;z-index:75;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:6px;background:rgba(0,0,0,.8);color:#fff;
  font:700 14px/1.7 'Noto Sans TC',sans-serif;white-space:nowrap;pointer-events:none}
.myc-tip.wrap{width:208px;white-space:normal;justify-content:flex-start}
.myc-tip[hidden]{display:none}
.myc-tip__arw{position:absolute;width:12px;height:8px}
.myc-tip__arw img{position:absolute;left:0;top:8.33%;width:12px;height:91.67%;display:block}
.myc-tip[data-pos="top"] .myc-tip__arw{top:-8px}
.myc-tip[data-pos="bottom"] .myc-tip__arw{bottom:-8px;transform:rotate(180deg)}
.myc-tip[data-dir="center"] .myc-tip__arw{left:50%;margin-left:-6px}
.myc-tip[data-dir="left"] .myc-tip__arw{left:12px}
.myc-tip[data-dir="right"] .myc-tip__arw{right:12px}
/* sideway：12×8 的三角轉 90°，視覺為 8×12，貼齊 body 左／右緣外 8px、垂直置中 */
.myc-tip[data-pos="left"] .myc-tip__arw{left:-10px;right:auto;top:50%;margin:-4px 0 0;transform:rotate(-90deg)}
.myc-tip[data-pos="right"] .myc-tip__arw{right:-10px;left:auto;top:50%;margin:-4px 0 0;transform:rotate(90deg)}

/* 課程類型 tab 選中：Portal 的 1.5px 漸層環用 ::before（定位 -1px、放大 2 倍再 scale(.5)）疊在透明 1px border 上，
   在 zoom .83 下與 border-box、陰影的像素取整對不上，左緣與下緣會露出 0.5–1px 白底。
   這裡改用真正的 1.5px 漸層 border（padding-box／border-box 雙層背景），padding 同步扣 .5px，外框尺寸不變 */
/* 課程類型項目卡線框（頁面縮放 0.83／0.875 下，border 會取整：1px→0.5px、1.5px→1px，故以下方式校正）
   · 未選中：1px 實際顯示 → border 設 1.25px（縮放後取整為 1px）
   · 選中：1.5px 外框漸層環（#74b509→#0b7dbc，與 hover 同色）以 SVG 背景描邊（向量 stroke 1.5、圓角 14.25 與卡片 15 同心）——不受像素取整影響，
     四邊與圓角處粗細一致；border 0、padding 補回原 1px 邊框，尺寸不變 */
#mc-form .ex-tab{border-width:1.25px;padding:11.75px 15.75px 12.75px 11.75px}
@media (max-width:600px){ #mc-form .ex-tab{padding:11.75px 5.75px} }
#mc-form .ex-tab.is-on{border:0;padding:13px 17px 14px 13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2374b509'/%3E%3Cstop offset='1' stop-color='%230b7dbc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0.75' y='0.75' rx='14.25' ry='14.25' fill='none' stroke='url(%23g)' stroke-width='1.5' style='width:calc(100%25 - 1.5px)%3Bheight:calc(100%25 - 1.5px)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,linear-gradient(180deg,#f2fbf9 0%,#fff 100%)}
#mc-form .ex-tab.is-on::before{display:none}
@media (max-width:600px){ #mc-form .ex-tab.is-on{padding:13px 7px} }

/* 分頁列（沿用 .ex-paginator）*/
.myc-pager{margin-top:24px}

/* 組裝課程列表 */
.myc-expand{display:inline-grid;place-items:center;width:32px;height:32px;border:0;padding:0;border-radius:6px;background:transparent;color:var(--myc-hi);cursor:pointer}
.myc-expand:hover{background:var(--myc-surface2)}
.myc-expand:focus-visible{outline:2px solid var(--myc-primary)}
.myc-expand .ico{font-size:24px}
.myc-link{display:inline-flex;align-items:center;gap:6px;font:700 18px/1.46 'Noto Sans TC',sans-serif;color:var(--myc-primary);background:none;border:0;cursor:pointer;padding:0;white-space:nowrap;transition:color .15s}
.myc-link .ico{font-size:22px;line-height:1}   /* ic-eye（visibility，線框）＋組裝課程清單；預設即為預覽色（primary）、不加底線 */
.myc-link:hover{color:#19625c}                 /* primary-pressed：hover 再加深，白底對比 5.1 → 7.0 */
.myc-link:focus-visible{outline:2px solid var(--myc-primary);outline-offset:2px}
.myc-table.asm td{height:136px}
.myc-table.asm .myc-act{position:static;width:160px;max-width:160px}
.myc-table.asm .myc-act::before{display:none}

/* ---------- Modal（.modal / header·content·footer）---------- */
.myc-mask{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px}
.myc-mask[hidden]{display:none}
.myc-modal{background:#fff;border-radius:8px;width:520px;max-width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;
  box-shadow:0 7px 4px rgba(0,0,0,.04),0 5px 11px rgba(0,0,0,.04),0 12px 8.5px rgba(0,0,0,.04)}
.myc-modal.xl{width:1440px}
.myc-modal__hd{display:flex;align-items:flex-start;gap:12px;padding:16px 16px 12px 20px;border-bottom:1px solid var(--myc-line)}
.myc-modal__hd h2{flex:1;min-width:0;margin:0;font:700 23px/1.5 'Noto Sans TC',sans-serif;color:var(--myc-hi)}
.myc-modal__x{display:grid;place-items:center;width:32px;height:32px;margin:-2px -4px 0 0;border:0;padding:0;background:transparent;border-radius:6px;color:var(--myc-mid);cursor:pointer}
.myc-modal__x:hover{background:rgba(0,0,0,.06);color:var(--myc-hi)}
.myc-modal__x:focus-visible{outline:2px solid var(--myc-primary)}
.myc-modal__x .ico{font-size:24px}
.myc-modal__bd{padding:20px 24px 32px;overflow:auto;min-height:0}
.myc-modal__bd p{margin:0;font:400 18px/1.7 'Noto Sans TC',sans-serif;text-align:center;color:var(--myc-hi)}
.myc-modal.xl .myc-modal__bd{padding:20px 24px 24px}
.myc-modal__ft{display:flex;gap:12px;padding:20px 24px;border-top:1px solid var(--myc-line)}
.myc-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:8px;border:1px solid transparent;cursor:pointer;
  font:700 18px/1 'Noto Sans TC',sans-serif;text-decoration:none;transition:background-color .15s ease,border-color .15s ease}
.myc-btn.primary{background:var(--myc-primary);color:#fff}
.myc-btn.primary:hover{background:#1a6a64}
.myc-btn.danger{background:var(--myc-on-error-c);color:#fff}
.myc-btn.danger:hover{background:#a8221c}
.myc-btn.ghost{background:#fcfcff;border-color:#abaab4;color:rgba(0,0,0,.6)}   /* sys/button outlined_gray（Figma 106:6345）：surface 底、outline 框、medium-emphasis 字 */
.myc-btn.ghost:hover{background:#f5f6fa;color:var(--myc-hi)}
.myc-btn:focus-visible{outline:3px solid rgba(31,122,115,.35);outline-offset:2px}

/* RWD：行動版表格維持橫向捲動；篩選欄 label 改上下排列 */
@media (max-width:639.98px){
  .myc-modal__hd h2{font-size:20px}
}

/* ============================================================================
   下拉選單：對齊 Figma UI Library「sys / dropdown_select_list」（FUSZ9w9dJWB2DJUTUEiGVW 53:1928）
   面板：白底、圓角 4、Elevation/00 陰影、無內距；選項 sys/dropdown_select_list_item：內距 10/12、
   2row/M/Regular 16px 行高 1.48 字距 .14px、on-surface-high-emphasis；hover 疊 opacity-4
   變體：單選（主類別、認證時數）＝ only_text；複選（加盟機關、時數類別、學習狀態）＝ L_ic+text
         （check_box_outline_blank 60% 灰／check_box primary，20px、圖文間距 12）；排序＝ R_ic（右側勾選）
   只覆寫外觀，選單的 HTML 與互動仍由 Portal 探索頁共用程式負責
   ============================================================================ */
#mc-form [id$="-menu"],#mc-sortbox .exo-menu{
  border:0;border-radius:4px;padding:0;overflow:hidden;background:#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 2px 1px 1px rgba(0,0,0,.08),0 0 3px rgba(0,0,0,.12)}
#mc-form [id$="-menu"] ul{display:flex;flex-direction:column;gap:0}
#mc-form .exm-opt,#mc-form .exh-opt,#mc-form .exa-opt,#mc-sortbox .exo-opt{
  display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 12px;border-radius:0;background:transparent;
  font:400 16px/1.48 'Noto Sans TC','Inter',Arial,sans-serif;letter-spacing:.14px;color:#000;text-align:left;white-space:normal}
#mc-form .exm-opt:hover,#mc-form .exh-opt:hover,#mc-form .exa-opt:hover,#mc-sortbox .exo-opt:hover,
#mc-form .exm-opt:focus-visible,#mc-form .exh-opt:focus-visible,#mc-form .exa-opt:focus-visible,#mc-sortbox .exo-opt:focus-visible{background:rgba(0,0,0,.04);outline:none}
#mc-form .exa-opt[aria-selected="true"],#mc-sortbox .exo-opt[aria-selected="true"]{background:transparent;font-weight:400}
#mc-form .exa-opt[aria-selected="true"]:hover,#mc-sortbox .exo-opt[aria-selected="true"]:hover{background:rgba(0,0,0,.04)}
/* L_ic：勾選框改用 Material 圖示（20px，上方 3px 對齊首行文字）*/
#mc-form .exa-box{width:20px;height:20px;margin-top:2px;border:0;border-radius:0;background:none!important;color:rgba(0,0,0,.6)}
#mc-form .exa-box .ico{display:none}
#mc-form .exa-box::before{content:'check_box_outline_blank';font:400 20px/1 'Material Symbols Outlined';font-variation-settings:'FILL' 0;
  -webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
#mc-form .exa-opt[aria-selected="true"] .exa-box{color:var(--myc-primary)}
#mc-form .exa-opt[aria-selected="true"] .exa-box::before{content:'check_box';font-variation-settings:'FILL' 1}
#mc-form .exa-opt .exc-badge{margin-top:-1px}
/* 加盟機關：面板頂端的搜尋框保留，四周留白與選項對齊 */
#mca-menu>div:first-child{margin:12px 12px 4px}
#mca-list{padding-bottom:4px}
/* 排序（R_ic）：保留原本的類別圖示（縮成 24px），勾選移到右側 20px */
#mc-sortbox .exo-opt{align-items:center}
#mc-sortbox .exo-ic{width:24px;height:24px}
#mc-sortbox .exo-ic img{width:16px;height:16px}
#mc-sortbox .exo-opt .exo-ck{font-size:20px;padding-left:12px}

/* MOOCs「是」：只顯示線框圖示 check_circle_outline（primary 色），實際顯示 ≥28px：
   頁面縮放 ≥1440＝0.83 → 34px（28.2）、<1440＝0.875 → 32px（28.0）；已下架列轉灰 */
.myc-yes{display:inline-grid;place-items:center;line-height:1;color:#2ca095}   /* primary 淡一階＝primary500 #2CA095（白底 3.3:1，圖示門檻 3:1 ✓）*/
.myc-yes .ico{font-size:27.5px;line-height:1}   /* 實際顯示 24px（<1440 頁面縮放 0.875）*/
@media (min-width:1440px){.myc-yes .ico{font-size:29px}}   /* 實際顯示 24px（≥1440 頁面縮放 0.83）*/
.myc-table tr.is-off .myc-yes{color:var(--myc-dis)}

/* 智慧客服排隊中提醒（Figma 12057:195553）：沿用本頁 .myc-modal */
/* 對齊 Figma 12704:102831（最新版）：寬 540、header 無分隔線；featured icon＝surface2 圓底（padding 22 → 72px）＋42px error_outline primary；
   內文「終止排隊」以 primary 色強調 */
#myc-qleave .myc-modal{width:540px}
#myc-qleave .myc-modal__hd{border-bottom:0}
#myc-qleave .myc-modal__ic{width:72px;height:72px;background:#edf0f4;margin-top:0}
#myc-qleave .myc-modal__ic .ico{font-size:37px}   /* Figma 42px 字框內實際字形高 30px；本站 Outlined 字型取 37px 得到相同 30px */
#myc-qleave .myc-modal__bd p{letter-spacing:.0014em}
#myc-qleave .myc-em{color:var(--myc-primary);font-weight:700}
/* .modal / header 帶 featured icon（Figma UI 105:5025 showIc）：標題列下方置中 56px surface1 圓底＋28px primary 外框 icon */
.myc-modal__hd.has-ic{flex-direction:column;align-items:stretch;gap:0}
.myc-modal__top{display:flex;align-items:flex-start;gap:12px}
.myc-modal__ic{display:grid;place-items:center;width:56px;height:56px;margin:4px auto 0;border-radius:9999px;background:#f5f6fa;color:var(--myc-primary)}
.myc-modal__ic .ico{font-size:28px;line-height:1}

/* 認證時數：數字加粗（Inter 700），已下架列同樣轉灰 */
.myc-table td.myc-hours{font-weight:700}

/* 以滑鼠開啟彈窗時焦點放在對話框本身（不在按鈕上畫焦點框）；鍵盤開啟才聚焦到預設按鈕 */
.myc-modal:focus{outline:none}

/* ============================================================================
   表格空間精簡（避免上下左右捲太久）：
   · 列高：固定 136 → 最小 84（內容多時自動長高），內距 16 → 12/14；表頭 64 → 56
   · 欄寬：依實際內容收窄最小寬度；終身主/子類別、加盟機關改為最多 2 行（原單行截斷，欄位需留很寬）
   · 上傳狀態：預計完成日太長時換到下一行，不再撐寬整欄
   ============================================================================ */
.myc-table th{height:56px;padding:0 14px}
.myc-table td,.myc-table.asm td{height:84px;padding:12px 14px}
.myc-table td.myc-act,.myc-table th.myc-act{padding:0}
.w-140{min-width:110px}.w-160{min-width:136px}.w-180{min-width:168px}.w-200{min-width:150px}.w-220{min-width:160px}.w-340{min-width:240px}
.myc-table td.trunc>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;line-height:1.4}
.myc-up>div{flex-wrap:nowrap;white-space:nowrap}   /* tag＋「處理中」＋「(預計於…完成上傳)」維持同一排，欄寬隨內容 */
.myc-steps{min-width:168px}

/* 課程編號：18 → 16px（縮小一級）；欄寬隨字寬收窄 */
.myc-table td.myc-code{font-size:16px}
.myc-table th.w-180,.myc-table td.myc-code{min-width:150px}

/* 次要資訊欄（終身主／子類別、加盟機關、通過日期、報名日期、最近上課時間、課程下架時間）：18 → 16px（小一級），行高同步收 */
.myc-table td.myc-sm{font-size:16px;line-height:1.45}

/* 終身子類別：代碼與名稱各自不拆字，僅在「代碼/」後換行 */
.myc-table .myc-nb{white-space:nowrap}

/* 課程名稱欄寬：以「淨零排放與永續發展專題(薦升簡訓練適用)」（20px Bold 實測 376px）可排進一行為準 → 376＋左右內距 28 ≈ 408px，固定此寬 */
.myc-table th.w-360,.myc-table td.w-360{width:408px;min-width:408px;max-width:408px}

/* 列高一致化：最小列高 84 → 104（涵蓋「兩行課程名稱＋狀態標籤」與「兩個上傳類別」的常見情況），
   同時壓縮會撐高的內容：課程名稱行高 1.5→1.35、名稱與標籤間距 10→6、上傳類別間距 8→4、儲存格上下內距 12→10。
   多數列都落在 104，最多內容（三個上傳類別）也只到約 110，不再忽高忽矮 */
.myc-table td,.myc-table.asm td{height:104px;padding-top:10px;padding-bottom:10px}
.myc-table td.myc-act{padding:0}
.myc-title{line-height:1.35}
.myc-table td.myc-name{line-height:1.35}
.myc-badges{margin-top:6px}
.myc-up{gap:4px}

/* 終身主類別：至少讓「機關業務知能訓練」（16px，8 字約 129px）排成一行 → 129＋左右內距 28 ≈ 160px */
.myc-table th.myc-main,.myc-table td.myc-main{min-width:160px}

/* 加盟機關：至少讓「Openedu（外部連結）」（16px 實測 162px）排成一行 → 162＋左右內距 28 ≈ 194px */
.myc-table th.myc-org,.myc-table td.myc-org{min-width:194px}

/* 狀態標籤移到課程編號下方：編號一行、標籤直排（兩個標籤時上下排列），靠左對齊 */
.myc-table td.myc-code .myc-code__no{display:block}
.myc-table td.myc-code .myc-badges{flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px}
.myc-table td.myc-code .myc-badge{font-family:'Noto Sans TC',sans-serif}

/* 組裝子課程標籤：位於課程名稱左上方，與名稱間距 4px */
.myc-table .myc-subtag{display:flex;width:max-content;margin-bottom:4px}

/* 終身子類別：至少讓「343/環境及資源管理」（16px 實測 148px）排成一行 → 148＋左右內距 28 ≈ 180px */
.myc-table th.myc-subc,.myc-table td.myc-subc{min-width:180px}

/* 終身主類別／終身子類別／加盟機關：實際顯示字級 ≥15px（zoom .83 → 18.1px；.875 → 17.2px） */
.myc-table td.myc-main,.myc-table td.myc-subc,.myc-table td.myc-org{font-size:17.2px}
@media (min-width:1440px){.myc-table td.myc-main,.myc-table td.myc-subc,.myc-table td.myc-org{font-size:18.1px}}
/* 放大字級後的欄寬：文字實測＋左右內距 28 */
.myc-table th.myc-main,.myc-table td.myc-main{min-width:176px}
.myc-table th.myc-subc,.myc-table td.myc-subc{min-width:196px}
.myc-table th.myc-org,.myc-table td.myc-org{min-width:218px}

/* 課程名稱：實際顯示 16px（zoom .83 → 19.3px；.875 → 18.3px） */
.myc-title{font-size:18.3px}
@media (min-width:1440px){.myc-title{font-size:19.3px}}
/* 16px 後「淨零排放與永續發展專題(薦升簡訓練適用)」實測 362px＋內距 28 → 欄寬 392px，維持一行 */
.myc-table th.w-360,.myc-table td.w-360{width:392px;min-width:392px;max-width:392px}

/* 斑馬紋：偶數列底色 surface（DS --color-surface #fcfcff）；含右側 sticky 操作欄，hover 仍走 #fbfcfd */
.myc-table tbody tr:nth-child(even) td{background:#fcfcff}
.myc-table tbody tr:hover td{background:#fbfcfd}

/* 上傳狀態「處理中」：實心 schedule（時鐘）icon；暖橘由 #b35a00（tone 40）淡 2 階 → #e8862a（tone 60）。
   icon 為裝飾（aria-hidden，旁有「處理中」文字），狀態不靠顏色單獨傳達；與「已上傳」實心綠 check_circle 成對 */
.myc-up em .ico.myc-ing{color:#e8862a}

/* 「(預計於…完成上傳)」說明：實際顯示 13px（zoom .83 → 15.7px；.875 → 14.9px） */
.myc-up small{font-size:14.9px}
@media (min-width:1440px){.myc-up small{font-size:15.7px}}

/* 表頭左上／右上圓角：實際顯示 8px（zoom .83 → 9.6px；.875 → 9.1px）。
   圓角同時加在捲動容器（橫捲時可見的左緣也保持圓角）與首／末 th（右側 sticky 操作欄） */
.myc-scroll{--myc-th-r:9.1px;border-radius:var(--myc-th-r) var(--myc-th-r) 0 0}
@media (min-width:1440px){.myc-scroll{--myc-th-r:9.6px}}
.myc-table thead tr>th:first-child{border-top-left-radius:var(--myc-th-r)}
.myc-table thead tr>th:last-child{border-top-right-radius:var(--myc-th-r)}

/* 上傳狀態「異常」（Figma 12340:92672）：實心 error icon（error #db352e）＋「異常」與說明皆 on-error-container #c52821；
   說明中原因關鍵字「無身分證號 / 服務機關代碼」加粗；字級沿用處理中（標題 14px Bold、說明 13px） */
.myc-up em.myc-err,.myc-up small.myc-err{color:var(--myc-on-error-c)}
.myc-up em.myc-err .ico{color:var(--myc-error)}
.myc-up small.myc-err b{font-weight:700}

/* 課程名稱字距：Bold 中文在 16px 偏擠 → letter-spacing .025em（≈0.4px），閱讀較舒展 */
.myc-title{letter-spacing:.025em}
/* 字距加寬後「淨零排放與永續發展專題(薦升簡訓練適用)」實測 372px＋內距 28 → 欄寬 402px，維持一行 */
.myc-table th.w-360,.myc-table td.w-360{width:402px;min-width:402px;max-width:402px}
/* 「淨零排放與永續發展專題(薦升簡訓練適用)」保證一行：實測 372px，原欄寬僅留 2px 餘裕，
   不同瀏覽器／字型 fallback 渲染略寬就會斷行 → 預留 ≈5% 安全量：372×1.05＋內距 28 ≈ 420px */
.myc-table th.w-360,.myc-table td.w-360{width:420px;min-width:420px;max-width:420px}

/* 學習狀態「ic＋已通過／未通過」光學置中：flex 盒子已置中，但 Noto Sans TC 字形墨色偏下約 1px，
   icon 看起來偏高 → icon 下移 1px，使 icon 與文字的實際墨色中心對齊 */
.myc-stbtn .ico{transform:translateY(1px)}
@media (max-width:1439.98px){.myc-stbtn .ico{transform:translateY(2px)}}   /* zoom .875 下實測需再多 1px 才對齊 */

/* 上傳狀態「ic＋處理中／異常／已上傳」光學置中：實測 icon 墨色中心比中文字高約 1.8px → icon 下移對齊 */
.myc-up em .ico{transform:translateY(1.8px)}

/* 篩選條件項目卡「選中」：漸層外框線（#74b509→#0b7dbc）實際顯示 2px
   （zoom .875 → stroke 2.29px；zoom .83 → 2.41px）；SVG 向量描邊，四邊與圓角粗細一致 */
#mc-form .ex-tab.is-on{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2374b509'/%3E%3Cstop offset='1' stop-color='%230b7dbc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.145' y='1.145' rx='13.855' ry='13.855' fill='none' stroke='url(%23g)' stroke-width='2.29' style='width:calc(100%25 - 2.29px)%3Bheight:calc(100%25 - 2.29px)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,linear-gradient(180deg,#f2fbf9 0%,#fff 100%)}
@media (min-width:1440px){#mc-form .ex-tab.is-on{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2374b509'/%3E%3Cstop offset='1' stop-color='%230b7dbc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1.205' y='1.205' rx='13.795' ry='13.795' fill='none' stroke='url(%23g)' stroke-width='2.41' style='width:calc(100%25 - 2.41px)%3Bheight:calc(100%25 - 2.41px)'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,linear-gradient(180deg,#f2fbf9 0%,#fff 100%)}}

/* 篩選條件項目卡「未選取」：外框線實際顯示 0.5px（原 Portal 色 #d2dff3）。
   CSS border 會被取整成 1 個實體像素 → 改以 SVG 向量描邊（zoom .875 → 0.57px；.83 → 0.6px），border 保留透明以維持尺寸；
   :hover 不套用，保留 Portal 原本的漸層 hover 框 */
#mc-form .ex-tab:not(.is-on):not(:hover){border-color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0.285' y='0.285' rx='14.715' ry='14.715' fill='none' stroke='%23d2dff3' stroke-width='0.57' style='width:calc(100%25 - 0.57px)%3Bheight:calc(100%25 - 0.57px)'/%3E%3C/svg%3E") border-box 0 0/100% 100% no-repeat,#fff}
@media (min-width:1440px){#mc-form .ex-tab:not(.is-on):not(:hover){background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0.3' y='0.3' rx='14.7' ry='14.7' fill='none' stroke='%23d2dff3' stroke-width='0.6' style='width:calc(100%25 - 0.6px)%3Bheight:calc(100%25 - 0.6px)'/%3E%3C/svg%3E") border-box 0 0/100% 100% no-repeat,#fff}}

/* 本頁框線由上方 SVG 背景繪製；Portal 共用的 #ex-tab-ring（::before 遮罩環）於本頁停用，避免重疊 */
#mc-form .ex-tab::before{display:none}

/* 表格橫向捲動條（我的課程／學習紀錄共用）：原生捲軸長度約半個表寬、顏色偏深 → 隱藏原生捲軸，
   改由 js/my-courses.js 產生固定長度淺灰短捲動條：thumb 96×6、#d5dce5，hover／拖曳 #b8c1cc；軌道平時透明、滑過才淡顯 */
.myc-scroll{scrollbar-width:none}
.myc-scroll::-webkit-scrollbar{display:none;height:0}
.myc-sbar{position:relative;height:14px;margin-top:6px;border-radius:99px;cursor:pointer;touch-action:none}
.myc-sbar::before{content:"";position:absolute;left:0;right:0;top:4px;height:6px;border-radius:99px;background:transparent;transition:background .2s}
.myc-sbar:hover::before,.myc-sbar.is-drag::before{background:#f1f4f8}
.myc-sbar>i{position:absolute;top:4px;left:0;width:96px;height:6px;border-radius:99px;background:#d5dce5;cursor:grab;transition:background .15s}
.myc-sbar:hover>i,.myc-sbar.is-drag>i{background:#b8c1cc}
.myc-sbar.is-drag>i{cursor:grabbing}
.myc-sbar[hidden]{display:none}
/* 捲動條緊鄰表格下緣（無間距），thumb／軌道高度 6→10px */
.myc-sbar{margin-top:0;height:12px}
.myc-sbar::before{top:0;height:10px}
.myc-sbar>i{top:0;height:10px}

/* 課程進度「時數／測驗／問卷」未完成（off）：文字與圓圈改用 on-surface-disabled rgba(0,0,0,.35) */
.myc-step.off,.myc-step.off .ico{color:var(--myc-dis)}

/* 學習紀錄「年度」單選（.mcy-opt）：同主類別／認證時數的 only_text 選項樣式 */
#mc-form .mcy-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:10px 12px;border-radius:0;background:transparent;
  font:400 16px/1.48 'Noto Sans TC','Inter',Arial,sans-serif;letter-spacing:.14px;color:#000;text-align:left;white-space:normal}
#mc-form .mcy-opt:hover,#mc-form .mcy-opt:focus-visible{background:rgba(0,0,0,.04);outline:none}

/* 「共 N 筆課程」的數字：Inter（DS 字型角色：數字 Inter 優先；同 Portal 探索頁 #ex-count）*/
#myc-count{font-family:'Inter','Noto Sans TC',Arial,sans-serif}

/* 項目卡「選中」外框改為真正的 2 畫面 px 漸層 border（border-box 漸層＋padding-box 底）：
   遮罩描邊在卡片高度換算成半像素時（如 75.5px）下緣／右緣會被反鋸齒稀釋變細；border 寬度瀏覽器會對齊整數像素，四邊等粗、圓角平順。
   zoom .875 → 2.29px；zoom .83（≥1440）→ 2.41px；padding 扣回 border 寬，卡片尺寸不變 */
#mc-form .ex-tab.is-on{border:2.29px solid transparent;padding:10.71px 14.71px 11.71px 10.71px;background:linear-gradient(180deg,#f2fbf9 0%,#fff 100%) padding-box,linear-gradient(135deg,#74b509 0%,#0b7dbc 100%) border-box}
@media (max-width:600px){ #mc-form .ex-tab.is-on{padding:10.71px 4.71px} }
@media (min-width:1440px){ #mc-form .ex-tab.is-on{border:2.41px solid transparent;padding:10.59px 14.59px 11.59px 10.59px;background:linear-gradient(180deg,#f2fbf9 0%,#fff 100%) padding-box,linear-gradient(135deg,#74b509 0%,#0b7dbc 100%) border-box} }
@media (min-width:1440px) and (max-width:600px){}
#mc-form .ex-tab.is-on::before{display:none!important}
/* 選中／hover 上浮改為整數畫面像素（2px）：translateY(-2px) 在 zoom .83 會變成 1.66px，上下框線落在半像素被糊細 */
@media (max-width:1439.98px){ #mc-form .ex-tab.is-on,#mc-form .ex-tab:hover{transform:translateY(-2.29px)} }
@media (min-width:1440px){ #mc-form .ex-tab.is-on,#mc-form .ex-tab:hover{transform:translateY(-2.41px)} }