/* =========================================================
   課程簡介 course.html 專用樣式（沿用 labs.css／based.css／courseplan.css）
   ========================================================= */
.ci-tools { position: sticky; top: var(--hdr, 66px); z-index: 50; background: rgba(243, 243, 240, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 14px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.ci-tools .row1 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ci-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px; }
.ci-search i { color: var(--ink-3); }
.ci-search input { border: 0; outline: 0; background: transparent; font: 500 15px/1.4 inherit; font-family: inherit; width: 100%; color: var(--ink); }
.ci-tools .campus-switch { margin-top: 0; }
.ci-tools .row2 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 10px; }
.ci-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ci-group .lbl { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }
.ci-group .mf { padding: 6px 12px 6px 10px; font-size: 13.5px; }
.ci-group .mf.plain::before { display: none; }
.ci-count { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.ci-count b { color: var(--ink); font-size: 15px; }

.ci-year { margin-top: 44px; }
.ci-year:first-of-type { margin-top: 0; }
.ci-year-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.ci-year-head h3 { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: var(--ink); }
.ci-year-head span { font-size: 14px; color: var(--ink-3); }
.ci-year-head::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }
.ci-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.cc { background: var(--paper); border-radius: 18px; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 20px 40px -34px rgba(18, 19, 22, .45); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; }
.cc::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--c, var(--ink)); }
.cc:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 28px 50px -34px rgba(18, 19, 22, .55); }
.cc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cc-tags span { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: #f3f3f0; color: var(--ink-2); }
.cc-tags .req { background: var(--ink); color: #fff; }
.cc-tags .mod { background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); }
.cc-tags .alt { background: var(--m-intern); color: var(--ink); }
.cc h4 { margin: 4px 0 0; font-size: 19px; font-weight: 900; line-height: 1.35; color: var(--ink); }
.cc .en { font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; line-height: 1.4; }
.cc p { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cc.open p { -webkit-line-clamp: unset; display: block; }
.cc p.tbd { color: var(--ink-3); font-style: italic; }
.cc .more { align-self: flex-start; margin-top: auto; padding-top: 6px; appearance: none; border: 0; background: none; font: 700 13px inherit; font-family: inherit; color: var(--brand); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cc .more::after { content: "↓"; transition: transform .2s; }
.cc.open .more::after { transform: rotate(180deg); }
.ci-empty { text-align: center; padding: 60px 20px; color: var(--ink-3); font-size: 15px; background: var(--paper); border-radius: 18px; }

@media (max-width: 991px) { .ci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
	.ci-grid { grid-template-columns: 1fr; }
	.ci-tools { position: static; }
	.ci-count { margin-left: 0; width: 100%; }
}
/* 工具列改為不固定、精簡高度（避免佔用瀏覽空間） */
.ci-tools { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 18px; }
.ci-search { padding: 7px 14px; }
.ci-tools .campus-switch button { padding: 8px 14px; font-size: 14px; }
.ci-group .mf { font-size: 13.5px; line-height: 1; padding: 7px 12px 7px 10px; }
/* 新舊課名 */
.cc .oldname { font-size: 12.5px; color: var(--ink-2); background: #fff6d6; border-radius: 6px; padding: 2px 8px; align-self: flex-start; }
.ci-archive { margin-top: 64px; padding-top: 8px; }
.ci-archive .ci-year-head h3 { color: var(--ink-2); }
.arch-toggle { order: 3; appearance: none; border: 1.5px solid var(--ink); background: #fff; border-radius: 999px; padding: 6px 16px; font: 700 13.5px/1 inherit; font-family: inherit; cursor: pointer; }
.ci-archive .ci-year-head::after { order: 2; }
.arch-note { font-size: 13.5px; color: var(--ink-3); margin: -4px 0 16px; line-height: 1.7; }
.cc.archived { background: #f7f7f4; box-shadow: 0 0 0 1px var(--line); }
.cc.archived::before { background: repeating-linear-gradient(90deg, #b9bcc4 0 8px, transparent 8px 14px); }
.cc.archived .cc-tags span { background: #e6e6e1; }