/* 期中作業頁（midterm.html）與 ui04「期中簡報怎麼做」共用 */

/* 時程卡 */
.mt-when { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 18px; }
.mt-when > div { background: var(--canvas); border-radius: 14px; padding: 14px 16px; }
.mt-when .k { display: block; font: 700 12px/1 var(--f-mono); color: var(--ink-3); letter-spacing: .06em; margin-bottom: 8px; }
.mt-when b { display: block; font: 900 20px/1.25 var(--f-display); color: var(--ink); }
.mt-when small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.6; }
.mt-when .hi { background: var(--brand-soft); }
.mt-when .hi b { color: var(--brand-strong); }

/* 三步驟 */
.mt-steps { list-style: none; padding: 0; margin: 10px 0 16px; display: grid; gap: 10px; counter-reset: mt; }
.mt-steps > li { counter-increment: mt; position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.mt-steps > li::before { content: counter(mt); width: 32px; height: 32px; border-radius: 50%; background: var(--brand-grad); color: #fff; font: 900 15px/32px var(--f-mono); text-align: center; }
.mt-steps.ag > li::before { background: var(--agent-grad); }
.mt-steps b { display: block; font-size: 15px; margin-bottom: 2px; }
.mt-steps p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.mt-steps kbd { font: 600 12px/1 var(--f-mono); background: var(--ink); color: #fff; border-radius: 5px; padding: 3px 6px; }
.mt-steps .ui { display: inline-block; font: 700 12.5px/1.4 var(--f-body); background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--ink); white-space: nowrap; }

/* 兩條路比較 */
.mt-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 16px; }
.mt-way { border: 2px solid var(--line); border-radius: 16px; padding: 18px 20px; background: var(--paper); position: relative; }
.mt-way.rec { border-color: var(--brand); }
.mt-way .tag { position: absolute; top: -12px; left: 16px; background: var(--brand); color: #fff; font: 700 12px/1 var(--f-body); padding: 6px 10px; border-radius: 999px; }
.mt-way.ag .tag { background: var(--agent); }
.mt-way h4 { font: 900 18px/1.35 var(--f-display); margin: 6px 0 8px; }
.mt-way ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.mt-way .cost { margin-top: 10px; font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.mt-way.rec .cost { color: var(--good); }
.mt-way.ag .cost { color: var(--warn); }
.mt-way a.go { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--brand-strong); text-decoration: none; }
.mt-way.ag a.go { color: var(--agent); }

/* 案例卡（連結） */
.mt-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 10px 0 16px; }
.mt-case { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; }
.mt-case .cover { display: block; aspect-ratio: 16 / 9; background: var(--canvas); overflow: hidden; }
.mt-case .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.mt-case .cover:hover img { transform: scale(1.03); }
.mt-case .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mt-case h4 { margin: 0; font: 900 17px/1.35 var(--f-display); }
.mt-case p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.mt-case .links { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.mt-case .links a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--canvas); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background .2s; }
.mt-case .links a:hover { background: var(--brand-soft); }
.mt-case .links a .t { font: 700 11px/1 var(--f-mono); padding: 4px 6px; border-radius: 5px; color: #fff; background: var(--brand-strong); }
.mt-case .links a.sl .t { background: var(--amber); }
.mt-case .links a span.n { flex: 1; }
.mt-case .links a small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* 內容對照表 */
.mt-map-wrap { overflow-x: auto; margin: 8px 0 16px; border: 1px solid var(--line); border-radius: 14px; }
table.mt-map { width: 100%; max-width: none; margin: 0; border: 0; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.mt-map th, table.mt-map td { border: 0; border-bottom: 1px solid var(--line-2); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
table.mt-map thead th { background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; position: sticky; top: 0; }
table.mt-map tr.ch td { background: var(--canvas); font: 900 13px/1.3 var(--f-mono); color: var(--brand-strong); letter-spacing: .04em; padding: 8px 12px; }
table.mt-map td:first-child { font-weight: 700; white-space: nowrap; }
table.mt-map td.pg a { display: inline-block; font: 700 12px/1 var(--f-mono); padding: 4px 7px; border-radius: 6px; background: var(--brand-soft); color: var(--brand-strong); text-decoration: none; margin: 0 4px 4px 0; }
table.mt-map td.pg.m a { background: var(--amber-soft); color: #8a5a00; }
table.mt-map td.lk a { color: var(--agent); font-weight: 700; text-decoration: none; white-space: nowrap; }
table.mt-map td small { color: var(--ink-3); }

/* 簡報圖庫 */
.mt-gal-ch { margin: 18px 0 8px; display: flex; align-items: baseline; gap: 10px; }
.mt-gal-ch b { font: 900 15px/1.3 var(--f-display); }
.mt-gal-ch span { font: 700 12px/1 var(--f-mono); color: var(--ink-3); }
.mt-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.mt-gal a { display: block; text-decoration: none; color: var(--ink); border-radius: 10px; }
.mt-gal a .im { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--canvas); position: relative; }
.mt-gal a .im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.mt-gal a .im i { position: absolute; left: 6px; top: 6px; font: 700 11px/1 var(--f-mono); font-style: normal; background: rgba(22,25,28,.82); color: #fff; padding: 4px 6px; border-radius: 5px; }
.mt-gal a:hover .im img { transform: scale(1.04); }
.mt-gal a:hover .im { border-color: var(--brand); }
.mt-gal a b { display: block; font-size: 13.5px; margin: 7px 2px 2px; line-height: 1.4; }
.mt-gal a small { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 0 2px; }

/* 5 分鐘時間條 */
.mt-time { display: flex; border-radius: 12px; overflow: hidden; margin: 10px 0 6px; font-size: 13px; font-weight: 700; color: #fff; }
.mt-time > span { padding: 12px 10px; line-height: 1.35; min-width: 0; }
.mt-time > span small { display: block; font: 700 11px/1 var(--f-mono); opacity: .85; margin-top: 4px; }
.mt-time .c1 { background: #2563EB; } .mt-time .c2 { background: var(--agent); } .mt-time .c3 { background: var(--brand-strong); } .mt-time .c4 { background: var(--figjam); } .mt-time .c5 { background: var(--ink-2); }

/* 錯誤 vs 正確 */
.mt-dd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 14px; }
.mt-dd > div { border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.7; }
.mt-dd .bad { background: var(--warn-soft); }
.mt-dd .good { background: var(--good-soft); }
.mt-dd b { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.mt-dd .bad b { color: var(--warn); } .mt-dd .good b { color: var(--good); }

@media (max-width: 767px) {
	.mt-when, .mt-ways, .mt-cases, .mt-dd { grid-template-columns: 1fr; }
	.mt-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mt-time { flex-direction: column; }
	.mt-time > span { flex: none !important; }
}

/* 加分項 */
.mt-bonus { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--figjam-soft); border: 1px dashed var(--figjam); margin: 12px 0 16px; }
.mt-bonus .star { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--figjam-grad); color: #fff; font: 900 16px/30px var(--f-body); text-align: center; }
.mt-bonus b { display: block; font-size: 15px; margin-bottom: 2px; color: #b8285c; }
.mt-bonus p { margin: 0; font-size: 14px; line-height: 1.75; }
table.mt-map tr.bonus td { background: var(--figjam-soft); }
table.mt-map tr.bonus td:first-child { color: #b8285c; }