\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@500;600;700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap\" rel=\"stylesheet\">\n<style>\n html, body { margin: 0; padding: 0; }\n body { font-family: \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif; color: #1f1a17; }\n eu-program-page { display: block; }\n<\/style>\n<\/head>\n<body>\n\n<eu-program-page><\/eu-program-page>\n\n<script>\nconst PAGE_CSS = `\n :host {\n --fs-base: 19px;\n --fs-xs: calc(var(--fs-base) - 2px);\n --fs-sm: calc(var(--fs-base) - 1px);\n --fs-md: var(--fs-base);\n --fs-lg: calc(var(--fs-base) + 3px);\n --fs-xl: calc(var(--fs-base) + 7px);\n --fs-h3: calc(var(--fs-base) + 9px);\n --fs-h2: calc(var(--fs-base) + 15px);\n --fs-h1: calc(var(--fs-base) + 32px);\n --lh-body: 1.85;\n --lh-tight: 1.55;\n\n --ink: #1f1a17;\n --ink-soft: #3a322b;\n --muted: #5a5046;\n --rule: #c8bda9;\n --rule-soft: #ece4d6;\n --primary: #6b2433;\n --primary-dk: #501826;\n --primary-lt: #f5e8eb;\n --accent: #b08947;\n --accent-dk: #7a5b29;\n --accent-lt: #f7eedb;\n --paper: #ffffff;\n --paper-warm: #faf5ec;\n\n --serif: \"Noto Serif TC\", \"Songti TC\", \"PMingLiU\", serif;\n --sans: \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n --latin-serif: \"Cormorant Garamond\", \"Noto Serif TC\", serif;\n\n display: block;\n color: var(--ink);\n font-family: var(--sans);\n font-size: var(--fs-md);\n line-height: var(--lh-body);\n -webkit-font-smoothing: antialiased;\n }\n\n :host([data-scale=\"md\"]) { --fs-base: 19px; }\n :host([data-scale=\"lg\"]) { --fs-base: 22px; }\n :host([data-scale=\"xl\"]) { --fs-base: 25px; }\n\n *, *::before, *::after { box-sizing: border-box; }\n\n .page {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n padding: 32px 48px 96px;\n }\n\n .a11y-bar {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 14px;\n padding: 12px 16px;\n margin-bottom: 24px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n }\n .a11y-bar .lbl {\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n font-weight: 700;\n margin-right: 4px;\n }\n .a11y-bar .lbl::before {\n content: \"\ud83d\udd0d \";\n margin-right: 4px;\n }\n .a11y-btn {\n min-width: 56px;\n min-height: 48px;\n padding: 8px 14px;\n background: #fff;\n border: 2px solid var(--primary);\n color: var(--primary);\n font-family: var(--serif);\n font-weight: 700;\n cursor: pointer;\n display: inline-flex; align-items: center; justify-content: center;\n line-height: 1;\n transition: background .15s, color .15s;\n }\n .a11y-btn:hover, .a11y-btn:focus-visible {\n background: var(--primary-lt);\n outline: none;\n }\n .a11y-btn[aria-pressed=\"true\"] {\n background: var(--primary);\n color: #fff;\n }\n .a11y-btn .a { font-size: 18px; }\n .a11y-btn .a.lg { font-size: 22px; }\n .a11y-btn .a.xl { font-size: 26px; }\n\n .hero {\n position: relative;\n border: 1px solid var(--rule);\n padding: 56px 56px 48px;\n background: var(--paper-warm);\n overflow: hidden;\n }\n .hero::before {\n content: \"\";\n position: absolute; inset: 14px;\n border: 1px solid var(--accent);\n pointer-events: none;\n }\n .hero-kicker {\n font-family: var(--latin-serif);\n font-style: italic;\n font-size: var(--fs-lg);\n letter-spacing: .04em;\n color: var(--accent-dk);\n margin: 0 0 14px;\n }\n .hero-kicker .sep { display:inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 12px 4px; }\n .hero h1 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-h1);\n line-height: 1.3;\n letter-spacing: .02em;\n color: var(--primary-dk);\n margin: 0 0 22px;\n }\n .hero-sub {\n font-size: var(--fs-md);\n color: var(--ink-soft);\n max-width: 820px;\n margin: 0 0 32px;\n line-height: 1.85;\n }\n .hero-chips {\n display: flex; flex-wrap: wrap; gap: 12px;\n }\n .chip {\n display: inline-flex; align-items: center;\n padding: 10px 18px;\n font-size: var(--fs-sm);\n letter-spacing: .04em;\n border: 2px solid var(--primary);\n color: var(--primary);\n background: #fff;\n font-weight: 700;\n min-height: 44px;\n }\n .chip.gold { border-color: var(--accent-dk); color: var(--accent-dk); }\n .chip.solid { background: var(--primary); color: #fff; }\n\n section {\n margin-top: 80px;\n }\n .sec-head {\n display: flex; align-items: baseline; gap: 20px;\n margin-bottom: 32px;\n padding-bottom: 20px;\n border-bottom: 2px solid var(--rule);\n }\n .sec-no {\n font-family: var(--latin-serif);\n font-size: calc(var(--fs-base) + 38px);\n font-style: italic;\n font-weight: 700;\n line-height: 1;\n color: var(--accent);\n flex-shrink: 0;\n }\n .sec-title {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-h2);\n color: var(--primary-dk);\n margin: 0;\n letter-spacing: .02em;\n line-height: 1.35;\n }\n .sec-title small {\n display: block;\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 500;\n font-size: var(--fs-sm);\n color: var(--muted);\n letter-spacing: .04em;\n margin-top: 6px;\n }\n\n .info-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n border-top: 1px solid var(--rule);\n border-left: 1px solid var(--rule);\n }\n .info-grid .row {\n display: grid;\n grid-template-columns: 180px 1fr;\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n }\n .info-grid .k {\n background: var(--paper-warm);\n color: var(--primary);\n font-weight: 700;\n padding: 18px 20px;\n border-right: 1px solid var(--rule);\n font-size: var(--fs-md);\n }\n .info-grid .v {\n padding: 18px 20px;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n }\n .info-grid .row.full { grid-column: 1 \/ -1; }\n\n .goal-list {\n list-style: none;\n margin: 0; padding: 0;\n display: grid;\n gap: 18px;\n counter-reset: g;\n }\n .goal-list li {\n position: relative;\n padding: 22px 26px 22px 72px;\n background: #fff;\n border-left: 5px solid var(--primary);\n border-top: 1px solid var(--rule);\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n font-size: var(--fs-md);\n line-height: 1.85;\n color: var(--ink-soft);\n }\n .goal-list li::before {\n content: counter(g, decimal-leading-zero);\n counter-increment: g;\n position: absolute;\n left: 22px; top: 20px;\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 8px);\n color: var(--accent-dk);\n }\n\n .pillar-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n .pillar {\n position: relative;\n padding: 36px 26px 30px;\n background: var(--paper);\n border: 1px solid var(--rule);\n overflow: hidden;\n }\n .pillar::before {\n content: \"\";\n position: absolute; left: 0; top: 0; right: 0;\n height: 8px;\n background: var(--primary);\n }\n .pillar:nth-child(2)::before { background: #a83a2e; }\n .pillar:nth-child(3)::before { background: #1f5e7a; }\n .pillar:nth-child(4)::before { background: var(--accent-dk); }\n .pillar .flag {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 600;\n font-size: var(--fs-sm);\n color: var(--muted);\n margin-bottom: 14px;\n letter-spacing: .08em;\n text-transform: uppercase;\n }\n .pillar h3 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-lg);\n margin: 0 0 12px;\n color: var(--ink);\n line-height: 1.4;\n }\n .pillar p {\n margin: 0;\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n line-height: 1.75;\n }\n .pillar .ord {\n position: absolute;\n right: 16px; top: 14px;\n font-family: var(--latin-serif);\n font-weight: 700;\n font-style: italic;\n font-size: calc(var(--fs-base) + 16px);\n color: var(--rule);\n }\n\n \/* ---------- \u5b78\u671f\u5340\u584a\u6a19\u984c ---------- *\/\n .term-section {\n margin-bottom: 12px;\n }\n .term-heading {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 20px;\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n letter-spacing: .06em;\n margin-bottom: 0;\n }\n .term-heading .term-badge {\n display: inline-block;\n background: rgba(255,255,255,.2);\n padding: 4px 12px;\n font-size: var(--fs-xs);\n letter-spacing: .04em;\n font-family: var(--sans);\n font-weight: 500;\n }\n\n .method-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n border-top: 1px solid var(--rule);\n border-left: 1px solid var(--rule);\n }\n .method {\n padding: 32px 24px;\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n background: #fff;\n }\n .method .ico {\n width: 44px; height: 44px;\n color: var(--primary);\n margin-bottom: 18px;\n }\n .method h4 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n margin: 0 0 8px;\n line-height: 1.4;\n }\n .method p {\n margin: 0;\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n line-height: 1.7;\n }\n\n .outcome-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 22px;\n }\n .outcome {\n padding: 32px 28px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n }\n .outcome .num {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 24px);\n color: var(--accent);\n line-height: 1;\n margin-bottom: 14px;\n }\n .outcome p {\n margin: 0;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n line-height: 1.8;\n }\n\n .reg-panel {\n border: 1px solid var(--rule);\n background: #fff;\n }\n .reg-row {\n display: grid;\n grid-template-columns: 220px 1fr;\n border-bottom: 1px solid var(--rule);\n }\n .reg-row:last-child { border-bottom: 0; }\n .reg-row .lab {\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n padding: 24px 22px;\n font-size: var(--fs-md);\n display: flex; align-items: center;\n }\n .reg-row .val {\n padding: 24px 26px;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n line-height: 1.8;\n }\n .reg-row .val .em {\n color: var(--primary-dk);\n font-weight: 700;\n }\n .reg-row .val .credit {\n display: inline-block;\n background: var(--accent-lt);\n color: var(--accent-dk);\n padding: 4px 12px;\n font-weight: 700;\n font-size: var(--fs-sm);\n margin-left: 8px;\n }\n\n .table-wrap { width: 100%; }\n table.courses {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--fs-md);\n }\n table.courses thead th {\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n padding: 18px 18px;\n text-align: left;\n border-right: 1px solid rgba(255,255,255,.15);\n font-size: var(--fs-md);\n letter-spacing: .04em;\n }\n table.courses thead th:last-child { border-right: 0; }\n table.courses tbody td {\n padding: 20px 18px;\n border-bottom: 1px solid var(--rule);\n color: var(--ink-soft);\n vertical-align: middle;\n line-height: 1.7;\n }\n table.courses tbody tr.term-row td {\n background: var(--paper-warm);\n border-top: 3px solid var(--primary);\n padding: 12px 18px;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n color: var(--primary-dk);\n letter-spacing: .04em;\n }\n table.courses tbody tr:not(.term-row):hover td { background: var(--paper-warm); }\n table.courses .cname {\n color: var(--ink);\n font-weight: 700;\n font-family: var(--serif);\n font-size: var(--fs-md);\n line-height: 1.55;\n }\n table.courses .cname .sub {\n display: block;\n color: var(--muted);\n font-family: var(--sans);\n font-weight: 500;\n font-size: var(--fs-xs);\n margin-top: 4px;\n }\n table.courses .pill {\n display: inline-block;\n padding: 6px 12px;\n font-size: var(--fs-xs);\n font-weight: 700;\n font-family: var(--latin-serif);\n font-style: italic;\n letter-spacing: .04em;\n border: 2px solid var(--accent-dk);\n color: var(--accent-dk);\n background: #fff;\n white-space: nowrap;\n }\n table.courses .pill.core { background: var(--primary); color: #fff; border-color: var(--primary); font-family: var(--sans); font-style: normal; }\n table.courses td.credits {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 8px);\n color: var(--primary);\n text-align: center;\n width: 100px;\n }\n table.courses td.credits .lbl {\n display: block;\n font-family: var(--sans);\n font-style: normal;\n font-weight: 500;\n font-size: var(--fs-xs);\n color: var(--muted);\n margin-top: 2px;\n }\n table.courses td.teacher {\n font-weight: 700;\n color: var(--ink);\n white-space: nowrap;\n width: 120px;\n font-size: var(--fs-md);\n }\n table.courses td.term {\n color: var(--ink-soft);\n font-size: var(--fs-sm);\n width: 200px;\n }\n\n .course-cards { display: none; }\n\n \/* \u624b\u6a5f\u7248\u5b78\u671f\u6a19\u984c *\/\n .ccard-term-head {\n padding: 12px 16px;\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n letter-spacing: .06em;\n margin-top: 12px;\n }\n\n .core-panel {\n border: 1px solid var(--rule);\n background: var(--paper-warm);\n padding: 40px 44px;\n }\n .core-panel .ribbon {\n display: inline-block;\n background: var(--primary);\n color: #fff;\n padding: 6px 16px;\n font-size: var(--fs-sm);\n font-weight: 700;\n letter-spacing: .08em;\n margin-bottom: 16px;\n }\n .core-panel h3 {\n font-family: var(--serif);\n font-size: var(--fs-h3);\n color: var(--primary-dk);\n margin: 0 0 16px;\n font-weight: 700;\n line-height: 1.4;\n }\n .core-panel .lead {\n color: var(--ink-soft);\n font-size: var(--fs-md);\n margin: 0 0 14px;\n line-height: 1.85;\n }\n .core-panel .star {\n color: var(--accent-dk);\n font-weight: 700;\n font-size: var(--fs-md);\n margin: 22px 0 28px;\n }\n .core-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-top: 8px;\n }\n .core-item {\n background: #fff;\n border: 1px solid var(--rule);\n padding: 26px 26px;\n }\n .core-item h4 {\n font-family: var(--serif);\n font-size: var(--fs-lg);\n margin: 0 0 10px;\n color: var(--primary);\n display: flex; align-items: center; gap: 10px;\n line-height: 1.4;\n }\n .core-item h4::before {\n content: \"\";\n width: 8px; height: 8px; background: var(--accent);\n display: inline-block;\n }\n .core-item p {\n margin: 0;\n font-size: var(--fs-md);\n color: var(--ink-soft);\n line-height: 1.8;\n }\n .core-note {\n margin-top: 28px;\n padding: 22px 26px;\n background: #fff;\n border-left: 5px solid var(--accent);\n font-size: var(--fs-md);\n color: var(--ink-soft);\n line-height: 1.85;\n }\n .core-note .lnk {\n color: var(--primary);\n text-decoration: underline;\n word-break: break-all;\n font-weight: 700;\n }\n\n .faculty-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 26px;\n }\n .faculty-card {\n display: grid;\n grid-template-columns: 140px 1fr;\n gap: 28px;\n padding: 32px;\n background: #fff;\n border: 1px solid var(--rule);\n position: relative;\n }\n .faculty-card::before {\n content: \"\";\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 5px;\n background: var(--primary);\n }\n .avatar {\n width: 140px; height: 140px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n display: flex; align-items: center; justify-content: center;\n font-family: var(--serif);\n font-size: calc(var(--fs-base) + 38px);\n color: var(--primary);\n font-weight: 700;\n letter-spacing: .04em;\n }\n .fac-body { min-width: 0; }\n .fac-name {\n font-family: var(--serif);\n font-size: var(--fs-h3);\n font-weight: 700;\n color: var(--ink);\n margin: 0 0 8px;\n letter-spacing: .04em;\n line-height: 1.3;\n }\n .fac-meta {\n display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;\n }\n .fac-meta .tag {\n font-size: var(--fs-xs);\n padding: 5px 12px;\n background: var(--primary-lt);\n color: var(--primary-dk);\n font-weight: 700;\n letter-spacing: .04em;\n }\n .fac-meta .tag.role { background: var(--accent-lt); color: var(--accent-dk); }\n .fac-course {\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n margin: 0 0 18px;\n line-height: 1.7;\n padding-bottom: 16px;\n border-bottom: 1px dashed var(--rule);\n }\n .fac-info { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }\n .fac-info li {\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: 14px;\n font-size: var(--fs-sm);\n line-height: 1.7;\n }\n .fac-info li .lab {\n color: var(--primary);\n font-weight: 700;\n }\n .fac-info li .txt { color: var(--ink-soft); }\n\n @media (max-width: 900px) {\n :host { --fs-base: 18px; }\n :host([data-scale=\"lg\"]) { --fs-base: 21px; }\n :host([data-scale=\"xl\"]) { --fs-base: 24px; }\n\n .page { padding: 20px 18px 64px; }\n .a11y-bar { gap: 8px; padding: 10px 12px; flex-wrap: wrap; justify-content: center; }\n .a11y-bar .lbl { width: 100%; text-align: center; margin-bottom: 4px; margin-right: 0; }\n\n .hero { padding: 36px 24px 32px; }\n .hero::before { inset: 10px; }\n .hero h1 { font-size: calc(var(--fs-base) + 16px); }\n .hero-sub { font-size: var(--fs-md); }\n\n section { margin-top: 56px; }\n .sec-head { gap: 14px; margin-bottom: 24px; padding-bottom: 16px; }\n .sec-no { font-size: calc(var(--fs-base) + 22px); }\n .sec-title { font-size: calc(var(--fs-base) + 6px); }\n\n .info-grid { grid-template-columns: 1fr; }\n .info-grid .row { grid-template-columns: 120px 1fr; }\n .info-grid .k { padding: 14px 14px; }\n .info-grid .v { padding: 14px 14px; }\n\n .goal-list li { padding: 18px 18px 18px 60px; }\n\n .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }\n .pillar { padding: 28px 20px 22px; }\n\n .method-grid { grid-template-columns: repeat(2, 1fr); }\n .method { padding: 24px 18px; }\n\n .outcome-grid { grid-template-columns: 1fr; }\n\n .reg-row { grid-template-columns: 1fr; }\n .reg-row .lab { padding: 14px 18px; }\n .reg-row .val { padding: 18px; }\n\n .table-wrap { display: none; }\n .course-cards {\n display: grid;\n gap: 12px;\n }\n .ccard {\n background: #fff;\n border: 1px solid var(--rule);\n border-left: 5px solid var(--primary);\n padding: 20px 20px;\n }\n .ccard .cname {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n color: var(--ink);\n margin-bottom: 12px;\n line-height: 1.55;\n }\n .ccard .crow {\n display: grid;\n grid-template-columns: 76px 1fr;\n gap: 10px;\n padding: 8px 0;\n font-size: var(--fs-sm);\n border-top: 1px dashed var(--rule);\n line-height: 1.65;\n }\n .ccard .crow:first-of-type { border-top: 0; padding-top: 10px; }\n .ccard .crow .k { color: var(--primary); font-weight: 700; }\n .ccard .crow .v { color: var(--ink-soft); }\n\n .core-panel { padding: 28px 22px; }\n .core-grid { grid-template-columns: 1fr; gap: 14px; }\n .core-item { padding: 22px 22px; }\n\n .faculty-grid { grid-template-columns: 1fr; gap: 18px; }\n .faculty-card { grid-template-columns: 96px 1fr; padding: 22px; gap: 18px; }\n .avatar { width: 96px; height: 96px; font-size: calc(var(--fs-base) + 18px); }\n .fac-info li { grid-template-columns: 56px 1fr; }\n }\n\n @media (max-width: 480px) {\n .pillar-grid { grid-template-columns: 1fr; }\n .method-grid { grid-template-columns: 1fr; }\n .faculty-card { grid-template-columns: 1fr; text-align: center; }\n .faculty-card::before { display: none; }\n .avatar { margin: 0 auto; }\n .fac-meta { justify-content: center; }\n .fac-info li { text-align: left; }\n }\n`;\n\nconst A11Y_HTML = `\n <div class=\"a11y-bar\" role=\"region\" aria-label=\"\u5b57\u7d1a\u8abf\u6574\u5de5\u5177\u5217\">\n <span class=\"lbl\">\u5b57\u7d1a\u8abf\u6574<\/span>\n <button class=\"a11y-btn\" data-set=\"md\" aria-label=\"\u6a19\u6e96\u5b57\u7d1a\" type=\"button\"><span class=\"a\">\u6a19\u6e96<\/span><\/button>\n <button class=\"a11y-btn\" data-set=\"lg\" aria-label=\"\u653e\u5927\u5b57\u7d1a\" type=\"button\"><span class=\"a lg\">\u653e\u5927<\/span><\/button>\n <button class=\"a11y-btn\" data-set=\"xl\" aria-label=\"\u7279\u5927\u5b57\u7d1a\" type=\"button\"><span class=\"a xl\">\u7279\u5927<\/span><\/button>\n <\/div>\n`;\n\nconst HERO_HTML = `\n <header class=\"hero\">\n <p class=\"hero-kicker\">European Arts <span class=\"sep\"><\/span> Cross-Cultural Dialogue<\/p>\n <h1>\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71<br>\u5b78\u5206\u5b78\u7a0b<\/h1>\n <p class=\"hero-sub\">\u4ee5\u300c\u4e09\u8a9e\u4e00\u85dd\u300d\u70ba\u6838\u5fc3\uff0c\u7d50\u5408\u897f\u73ed\u7259\u8a9e\u3001\u6cd5\u8a9e\u3001\u4fc4\u8a9e\u8207\u6b50\u6d32\u97f3\u6a02\u6587\u5316\uff0c\u57f9\u990a\u8de8\u6587\u5316\u7406\u89e3\u3001\u751f\u6daf\u8f49\u578b\u7d20\u990a\u8207\u7b2c\u4e8c\u5c08\u9577\u80fd\u529b\u3002\u4e2d\u6587\u6388\u8ab2\uff0c\u4e0d\u8a2d\u8a9e\u8a00\u8003\u8a66\u9580\u6abb\u3002<\/p>\n <div class=\"hero-chips\">\n <span class=\"chip solid\">\u8a9e\u8a00\u8207\u8de8\u6587\u5316\u6e9d\u901a\u985e<\/span>\n <span class=\"chip\">\u6a21\u7d44\u4e8c\uff1a\u751f\u6daf\u8f49\u578b\u8a2d\u8a08<\/span>\n <span class=\"chip gold\">\u7e3d\u8a08 18 \u5b78\u5206\u30fb9 \u9580\u8ab2<\/span>\n <\/div>\n <\/header>\n`;\n\nconst S1_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">I.<\/span>\n <h2 class=\"sec-title\">\u5b78\u7a0b\u57fa\u672c\u8cc7\u8a0a<small>Program Overview<\/small><\/h2>\n <\/div>\n <div class=\"info-grid\">\n <div class=\"row\"><div class=\"k\">\u5b78\u7a0b\u540d\u7a31<\/div><div class=\"v\">\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u5b78\u7a0b\u985e\u5225<\/div><div class=\"v\">\u8a9e\u8a00\u8207\u8de8\u6587\u5316\u6e9d\u901a\u985e<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u6240\u5c6c\u6a21\u7d44<\/div><div class=\"v\">\u6a21\u7d44\u4e8c\uff1a\u751f\u6daf\u8f49\u578b\u8a2d\u8a08<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u627f\u8fa6\u55ae\u4f4d<\/div><div class=\"v\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u6587\u7d44<\/div><\/div>\n <div class=\"row full\"><div class=\"k\">\u5354\u540c\u6388\u8ab2<\/div><div class=\"v\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb \u2500\u2500 \u897f\u6587\u7d44\u3001\u6cd5\u6587\u7d44\u3001\u4fc4\u6587\u7d44<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u7e3d\u5b78\u5206\u6578<\/div><div class=\"v\">18 \u5b78\u5206<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u7e3d\u8ab2\u7a0b\u6578<\/div><div class=\"v\">\u5171 9 \u9580\u8ab2\uff08\u542b\u4e0a\u3001\u4e0b\u5b78\u671f\uff09<\/div><\/div>\n <div class=\"row full\"><div class=\"k\">\u4e0a\u8ab2\u5730\u9ede<\/div><div class=\"v\">\u6de1\u6c5f\u5927\u5b78 \u53f0\u5317\u6821\u5712<\/div><\/div>\n <\/div>\n <\/section>\n`;\n\nconst S2_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">II.<\/span>\n <h2 class=\"sec-title\">\u5b78\u7a0b\u76ee\u6a19<small>Program Objectives<\/small><\/h2>\n <\/div>\n <ol class=\"goal-list\">\n <li>\u5efa\u7acb\u6b50\u6d32\u8a9e\u8a00\u8207\u6587\u5316\u4e4b\u5165\u9580\u6e9d\u901a\u80fd\u529b\uff0c\u57f9\u990a\u57fa\u672c\u8de8\u6587\u5316\u7406\u89e3\u8207\u4e92\u52d5\u7d20\u990a\uff08\u4e0d\u4ee5\u8a9e\u8a00\u8003\u8a66\u6216\u80fd\u529b\u8a8d\u8b49\u70ba\u4e3b\u8981\u76ee\u6a19\uff09\u3002<\/li>\n <li>\u57f9\u990a\u8de8\u6587\u5316\u7d20\u990a\uff0c\u62d3\u5c55\u7b2c\u4e8c\u5c08\u9577\u8207\u659c\u69d3\u4eba\u751f\u7684\u53ef\u80fd\u6027\u3002<\/li>\n <li>\u900f\u904e\u897f\u73ed\u7259\u8a9e\u3001\u6cd5\u8a9e\u3001\u4fc4\u8a9e\u53ca\u6b50\u6d32\u97f3\u6a02\u6587\u5316\uff0c\u652f\u6301\u5b78\u54e1\u751f\u6daf\u8f49\u578b\u8207\u4eba\u751f\u518d\u5b9a\u4f4d\u3002<\/li>\n <\/ol>\n <\/section>\n`;\n\nconst S3_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">III.<\/span>\n <h2 class=\"sec-title\">\u8ab2\u7a0b\u5167\u5bb9\u65b9\u5411<small>\"\u4e09\u8a9e\u4e00\u85dd\" \u2014 Three Languages, One Art<\/small><\/h2>\n <\/div>\n <div class=\"pillar-grid\">\n <div class=\"pillar\">\n <span class=\"ord\">01<\/span>\n <div class=\"flag\">Espa\u00f1ol<\/div>\n <h3>\u897f\u73ed\u7259\u8a9e\u6587\u5316<\/h3>\n <p>\u5f9e\u98f2\u98df\u3001\u6587\u5b78\u5230\u751f\u6d3b\u6558\u4e8b\uff0c\u8d70\u5165\u897f\u8a9e\u4e16\u754c\u7684\u820c\u5c16\u8207\u6587\u5316\u5be6\u8e10\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">02<\/span>\n <div class=\"flag\">Fran\u00e7ais<\/div>\n <h3>\u6cd5\u8a9e\u6587\u5316<\/h3>\n <p>\u5f9e\u57fa\u790e\u6cd5\u8a9e\u5165\u9580\u5230\u65c5\u904a\u6587\u5316\u9ad4\u9a57\uff0c\u7406\u89e3\u6cd5\u862d\u897f\u8a9e\u8a00\u8207\u751f\u6d3b\u7f8e\u5b78\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">03<\/span>\n <div class=\"flag\">\u0420\u0443\u0441\u0441\u043a\u0438\u0439<\/div>\n <h3>\u4fc4\u8a9e\u6587\u5316<\/h3>\n <p>\u900f\u904e\u7d93\u5178\u6587\u85dd\u8207\u93e1\u982d\u5f71\u50cf\uff0c\u8a8d\u8b58\u4fc4\u7f85\u65af\u7684\u793e\u6703\u8108\u7d61\u8207\u5bb6\u5ead\u8b70\u984c\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">04<\/span>\n <div class=\"flag\">Classical music<\/div>\n <h3>\u6b50\u6d32\u97f3\u6a02\u85dd\u8853<\/h3>\n <p>\u5f9e\u7dad\u4e5f\u7d0d\u3001\u9ed1\u68ee\u6797\u5230\u6cd5\u3001\u897f\u3001\u4fc4\u7684\u6d6a\u6f2b\u6a02\u6d3e\uff0c\u8046\u807d\u6b50\u6d32\u97f3\u6a02\u53f2\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst ICONS = {\n classroom: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"6\" y=\"9\" width=\"28\" height=\"20\"\/><path d=\"M6 29l14 5 14-5\"\/><circle cx=\"20\" cy=\"19\" r=\"3\"\/><\/svg>`,\n talk: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7 11h18v14H15l-4 4v-4H7z\"\/><path d=\"M19 17h22v12H35l-4 4v-4h-7\"\/><\/svg>`,\n digital: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"9\" width=\"30\" height=\"20\"\/><path d=\"M14 33h12M20 29v4\"\/><path d=\"M12 17l-3 3 3 3M28 17l3 3-3 3M22 16l-4 8\"\/><\/svg>`,\n art: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6c-8 0-14 6-14 13 0 5 4 8 8 8 2 0 3 1 3 3s-1 4 3 4c8 0 14-6 14-14S28 6 20 6z\"\/><circle cx=\"13\" cy=\"16\" r=\"2\"\/><circle cx=\"20\" cy=\"13\" r=\"2\"\/><circle cx=\"27\" cy=\"16\" r=\"2\"\/><circle cx=\"29\" cy=\"22\" r=\"2\"\/><\/svg>`\n};\n\nconst S4_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">IV.<\/span>\n <h2 class=\"sec-title\">\u5be6\u65bd\u65b9\u6cd5<small>Teaching Methods<\/small><\/h2>\n <\/div>\n <div class=\"method-grid\">\n <div class=\"method\">\n <div class=\"ico\">${ICONS.classroom}<\/div>\n <h4>\u50b3\u7d71\u8ab2\u5802\u4e0a\u8ab2<\/h4>\n <p>\u4ee5\u4e2d\u6587\u6388\u8ab2\u70ba\u4e3b\uff0c\u4e0d\u8a2d\u8a9e\u8a00\u80fd\u529b\u9580\u6abb\uff0c\u8f15\u9b06\u5165\u9580\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.talk}<\/div>\n <h4>\u8b1b\u5ea7\u8207\u5206\u7d44\u8a0e\u8ad6<\/h4>\n <p>\u4e3b\u984c\u5f0f\u8b1b\u5ea7\u642d\u914d\u5c0f\u7d44\u5c0d\u8a71\uff0c\u6df1\u5316\u8de8\u6587\u5316\u601d\u8003\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.digital}<\/div>\n <h4>\u6578\u4f4d\u7db2\u7d61\u6559\u5b78<\/h4>\n <p>\u540c\u6b65\uff0f\u975e\u540c\u6b65\u7dda\u4e0a\u6559\u5b78\uff0c\u9748\u6d3b\u914d\u5408\u5b78\u54e1\u751f\u6d3b\u7bc0\u594f\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.art}<\/div>\n <h4>\u85dd\u8853\u6b23\u8cde\u8207\u6587\u5316\u9ad4\u9a57<\/h4>\n <p>\u97f3\u6a02\u3001\u6587\u5b78\u3001\u5f71\u50cf\u3001\u98f2\u98df\uff0c\u591a\u611f\u5b98\u6d78\u6f64\u6b50\u6d32\u6587\u5316\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst S5_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">V.<\/span>\n <h2 class=\"sec-title\">\u9810\u671f\u6210\u6548<small>Expected Outcomes<\/small><\/h2>\n <\/div>\n <div class=\"outcome-grid\">\n <div class=\"outcome\">\n <div class=\"num\">01<\/div>\n <p>\u57f9\u990a\u5b78\u54e1\u5c0d\u6b50\u6d32\u4e0d\u540c\u6587\u5316\u8108\u7d61\u3001\u793e\u6703\u7d50\u69cb\u8207\u50f9\u503c\u89c0\u4e4b\u7406\u89e3\u3002<\/p>\n <\/div>\n <div class=\"outcome\">\n <div class=\"num\">02<\/div>\n <p>\u5354\u52a9\u5b78\u54e1\u5c07\u8de8\u6587\u5316\u5b78\u7fd2\uff0c\u8f49\u5316\u70ba\u5c0d\u8077\u6daf\u3001\u751f\u6d3b\u8207\u4eba\u751f\u65b9\u5411\u7684\u91cd\u65b0\u601d\u8003\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst S6_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VI.<\/span>\n <h2 class=\"sec-title\">\u4fee\u8ab2\u898f\u5b9a<small>Course Requirements<\/small><\/h2>\n <\/div>\n <div class=\"reg-panel\">\n <div class=\"reg-row\">\n <div class=\"lab\">\u627f\u8fa6\u55ae\u4f4d<\/div>\n <div class=\"val\"><span class=\"em\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u6587\u7d44<\/span><\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u6838\u5fc3\u8ab2\u7a0b<\/div>\n <div class=\"val\">\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b<span class=\"credit\">2 \u5b78\u5206<\/span><\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u5c08\u696d\u8ab2\u7a0b<\/div>\n <div class=\"val\">\n \u300c\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\u300d\u3001\u300c\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\u300d\u3001\u300c\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\u300d\u3001\u300c\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\u300d\u3001\u300c\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\u300d\u3001\u300c\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\u300d\u3001\u300c\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\u300d\u3001\u300c\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\u300d\n <span style=\"display:block; margin-top:6px; color:var(--muted); font-size:var(--fs-xs);\">\u5171 <span style=\"color:var(--primary-dk); font-weight:700;\">8 \u9580\u8ab2\uff0c16\u5b78\u5206<\/span><\/span>\n <\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u7e3d\u8a08<\/div>\n <div class=\"val\">\u5171 <span class=\"em\">9 \u9580\u8ab2<\/span>\uff0c\u7e3d\u4fee\u7fd2\u5b78\u5206\u9808\u9054 <span class=\"em\">18 \u5b78\u5206<\/span><\/div>\n <\/div>\n <\/div>\n <\/section>\n`;\n\n\/\/ \u2500\u2500 \u4fee\u6b63\u5f8c\u8ab2\u7a0b\u8cc7\u6599\uff1a\u4e0a\u5b78\u671f\uff1d\u897f\u8a9e\uff0b\u6cd5\u8a9e\uff0c\u4e0b\u5b78\u671f\uff1d\u4fc4\u8a9e\uff0b\u97f3\u6a02 \u2500\u2500\nconst COURSES_S1 = [\n { name: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\", sub: \"\u897f\u73ed\u7259\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u5289\u8389\u7f8e\", pill: \"Espa\u00f1ol\" },\n { name: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\", sub: \"\u897f\u73ed\u7259\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u5289\u8389\u7f8e\", pill: \"Espa\u00f1ol\" },\n { name: \"\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\", sub: \"\u6cd5\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u9673\u9e97\u5a1f\", pill: \"Fran\u00e7ais\" },\n { name: \"\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\", sub: \"\u6cd5\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u9673\u9e97\u5a1f\", pill: \"Fran\u00e7ais\" },\n];\nconst COURSES_S2 = [\n { name: \"\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\", sub: \"\u4fc4\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u912d\u76c8\u76c8\", pill: \"\u0420\u0443\u0441\u0441\u043a\u0438\u0439\" },\n { name: \"\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\", sub: \"\u4fc4\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u912d\u76c8\u76c8\", pill: \"\u0420\u0443\u0441\u0441\u043a\u0438\u0439\" },\n { name: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\", sub: \"\u6b50\u6d32\u97f3\u6a02\u85dd\u8853\", credits: \"2\", credits_label: \"\", teacher: \"\u6797\u9109\u96e8\", pill: \"Classical music\" },\n { name: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\", sub: \"\u6b50\u6d32\u97f3\u6a02\u85dd\u8853\", credits: \"2\", credits_label: \"\", teacher: \"\u6797\u9109\u96e8\", pill: \"Classical music\" },\n];\nconst COURSE_CORE = { name: \"\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\", sub: \"\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b\", credits: \"2\", teacher: \"\u9b4f\u60e0\u5a1f\", pill: \"\u6838\u5fc3\u5fc5\u4fee\", core: true };\n\nfunction courseRow(c, isFirst) {\n const cls = isFirst ? 'group-start' : '';\n const creditCell = c.credits\n ? `<td class=\"credits\">${c.credits}<span class=\"lbl\">${c.credits_label || '\u5b78\u5206'}<\/span><\/td>`\n : `<td class=\"credits\" style=\"color:var(--rule);\">\u2014<\/td>`;\n const pillCls = c.core ? 'pill core' : 'pill';\n return `\n <tr class=\"${cls}\">\n <td><div class=\"cname\">${c.name}<span class=\"sub\">${c.sub}<\/span><\/div><\/td>\n ${creditCell}\n <td><span class=\"${pillCls}\">${c.pill}<\/span><\/td>\n <td class=\"teacher\">${c.teacher}<\/td>\n <\/tr>`;\n}\n\nfunction termRow(label) {\n return `<tr class=\"term-row\"><td colspan=\"4\">${label}<\/td><\/tr>`;\n}\n\nfunction renderCourseTable() {\n const coreRows = courseRow(COURSE_CORE, true);\n const s1Rows = COURSES_S1.map((c,i) => courseRow(c, i===0)).join('');\n const s2Rows = COURSES_S2.map((c,i) => courseRow(c, i===0)).join('');\n return `\n <div class=\"table-wrap\">\n <table class=\"courses\">\n <thead>\n <tr>\n <th>\u8ab2\u7a0b\u540d\u7a31<\/th>\n <th style=\"text-align:center;\">\u5b78\u5206<\/th>\n <th>\u985e\u5225<\/th>\n <th>\u6388\u8ab2\u6559\u5e2b<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${termRow('\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b')}\n ${coreRows}\n ${termRow('115 \u5b78\u5e74\u5ea6 \u7b2c 1 \u5b78\u671f \u2500\u2500 \u897f\u73ed\u7259\u8a9e\u6587\u5316\u30fb\u6cd5\u8a9e\u6587\u5316')}\n ${s1Rows}\n ${termRow('115 \u5b78\u5e74\u5ea6 \u7b2c 2 \u5b78\u671f \u2500\u2500 \u4fc4\u8a9e\u6587\u5316\u30fb\u6b50\u6d32\u97f3\u6a02\u85dd\u8853')}\n ${s2Rows}\n <\/tbody>\n <\/table>\n <\/div>\n `;\n}\n\nfunction courseCard(c) {\n return `\n <div class=\"ccard\">\n <div class=\"cname\">${c.name}<\/div>\n <div class=\"crow\"><span class=\"k\">\u985e\u5225<\/span><span class=\"v\">${c.sub}\uff08${c.pill}\uff09<\/span><\/div>\n <div class=\"crow\"><span class=\"k\">\u5b78\u5206<\/span><span class=\"v\">${c.credits ? c.credits + ' \u5b78\u5206' + (c.credits_label ? '\uff08' + c.credits_label + '\uff09' : '') : '\u540c\u4e0a\u8ab2\u5408\u8a08'}<\/span><\/div>\n <div class=\"crow\"><span class=\"k\">\u6559\u5e2b<\/span><span class=\"v\">${c.teacher}<\/span><\/div>\n <\/div>`;\n}\n\nfunction renderCourseCards() {\n return `\n <div class=\"course-cards\">\n <div class=\"ccard-term-head\">\u6838\u5fc3\u5fc5\u4fee<\/div>\n ${courseCard(COURSE_CORE)}\n <div class=\"ccard-term-head\">\u7b2c 1 \u5b78\u671f \u2500\u2500 \u897f\u73ed\u7259\u8a9e\u6587\u5316\u30fb\u6cd5\u8a9e\u6587\u5316<\/div>\n ${COURSES_S1.map(courseCard).join('')}\n <div class=\"ccard-term-head\">\u7b2c 2 \u5b78\u671f \u2500\u2500 \u4fc4\u8a9e\u6587\u5316\u30fb\u6b50\u6d32\u97f3\u6a02\u85dd\u8853<\/div>\n ${COURSES_S2.map(courseCard).join('')}\n <\/div>`;\n}\n\nconst S7_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VII.<\/span>\n <h2 class=\"sec-title\">\u8ab2\u7a0b\u8868<small>Curriculum<\/small><\/h2>\n <\/div>\n ${renderCourseTable()}\n ${renderCourseCards()}\n <\/section>\n`;\n\nconst S8_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VIII.<\/span>\n <h2 class=\"sec-title\">\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b\u8aaa\u660e<small>Core Course<\/small><\/h2>\n <\/div>\n <div class=\"core-panel\">\n <span class=\"ribbon\">\u6838\u5fc3\u5fc5\u4fee\u30fb2 \u5b78\u5206<\/span>\n <h3>\u300a\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\u300b<\/h3>\n <p class=\"lead\">\u672c\u8ab2\u7a0b\u63a1\u5168\u9060\u8ddd\u65b9\u5f0f\u6559\u5b78\uff0c\u5305\u542b\u540c\u6b65\u8207\u975e\u540c\u6b65\u8996\u8a0a\u6559\u5b78\u3001\u7dda\u4e0a\u7559\u8a00\u8a0e\u8ad6\u8207\u7dda\u4e0a\u6e2c\u9a57\u7b49\u591a\u5143\u5b78\u7fd2\u5f62\u5f0f\u3002<\/p>\n <p class=\"star\">\u2605 \u50c5 1 \u6b21\u540c\u6b65\u8996\u8a0a\u9762\u6388\uff08Webex\uff09 \u2605<\/p>\n <div class=\"core-grid\">\n <div class=\"core-item\">\n <h4>\u975e\u540c\u6b65\u6578\u4f4d\u6559\u6750<\/h4>\n <p>\u7531\u6388\u8ab2\u6559\u5e2b\u4f9d\u8ab2\u7a0b\u55ae\u5143\u4e3b\u984c\u9032\u5ea6\uff0c\u900f\u904e\u6578\u4f4d\u6559\u6750\u9032\u884c\u6388\u8ab2\uff0c\u5b78\u54e1\u4f9d\u7167\u5404\u9031\u9032\u5ea6\u89c0\u770b\u6578\u4f4d\u6559\u6750\u5167\u5bb9\u3002<\/p>\n <\/div>\n <div class=\"core-item\">\n <h4>\u7dda\u4e0a\u7559\u8a00\u8a0e\u8ad6<\/h4>\n <p>\u7531\u6388\u8ab2\u6559\u5e2b\u5f15\u5c0e\u5b78\u54e1\uff0c\u900f\u904e\u6578\u4f4d\u5e73\u53f0\u7559\u8a00\u677f\u9032\u884c\u8a0e\u8ad6\uff1b\u5b78\u54e1\u53ef\u65bc\u8a0e\u8ad6\u5340\u63d0\u51fa\u554f\u984c\uff0c\u518d\u7531\u6559\u5e2b\u56de\u8986\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"core-note\">\n <strong style=\"color:var(--primary-dk);\">\u975e\u7a7a\u5927\u5b78\u54e1\u5982\u4f55\u9078\u4fee\u672c\u9580\u8ab2\u7a0b\uff1f<\/strong>\u3000\u5b78\u54e1\u4f9d\u5e33\u865f\u5bc6\u78bc\u9032\u5165\u7a7a\u5927\u6307\u5b9a\u5e73\u53f0\u4fee\u8ab2\u3002<br>\n \u4fee\u8ab2\u6307\u5b9a\u5e73\u53f0\u7db2\u5740\uff1a<a class=\"lnk\" href=\"https:\/\/3tron.nou.edu.tw\/\" target=\"_blank\" rel=\"noopener\">https:\/\/3tron.nou.edu.tw\/<\/a>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst FACULTY = [\n { name: \"\u9b4f\u60e0\u5a1f\", initial: \"\u9b4f\", role: \"\u5c08\u4efb\", creditTag: \"2 \u5b78\u5206\", course: \"\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\",\n current: \"\u570b\u7acb\u4e2d\u6b63\u5927\u5b78 \u6559\u6388\",\n edu: \"\u7f8e\u570b\u660e\u5c3c\u8607\u9054\u5927\u5b78 \u6559\u80b2\u653f\u7b56\u8207\u7ba1\u7406\u7814\u7a76\u6240 \u535a\u58eb\",\n expert: \"\u6210\u4eba\u6559\u80b2\u65b9\u6848\u898f\u5283\u8207\u7ba1\u7406\u3001\u6a02\u9f61\u5b78\u7fd2\u3001\u4eba\u751f\u8a2d\u8a08\" },\n { name: \"\u5289\u8389\u7f8e\", initial: \"\u5289\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\uff0f\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u8a9e\u7d44 \u526f\u6559\u6388\",\n edu: \"\u897f\u73ed\u7259\u99ac\u5fb7\u91cc Complutense \u5927\u5b78 \u535a\u58eb\",\n expert: \"\u8a9e\u8a00\u6559\u5b78\u3001\u6f22\u5b78\" },\n { name: \"\u9673\u9e97\u5a1f\", initial: \"\u9673\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\uff0f\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u8a9e\u7cfb\u6cd5\u6587\u7d44 \u52a9\u7406\u6559\u6388\",\n edu: \"\u6cd5\u570b\u53f2\u7279\u62c9\u65af\u5821\u5927\u5b78 \u8a9e\u8a00\u79d1\u5b78 \u535a\u58eb\",\n expert: \"\u8de8\u6587\u5316\u6e9d\u901a\u3001\u5c08\u696d\u6cd5\u8a9e\u6559\u5b78\" },\n { name: \"\u912d\u76c8\u76c8\", initial: \"\u912d\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\uff0f\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u4fc4\u8a9e\u7d44 \u526f\u6559\u6388\",\n edu: \"\u570b\u7acb\u83ab\u65af\u79d1\u7f85\u66fc\u8afe\u7d22\u592b\u5927\u5b78 \u535a\u58eb\",\n expert: \"\u8a9e\u8a00\u6559\u5b78\u3001\u8a9e\u8a00\u5b78\u53ca\u8a9e\u8a00\u6587\u5316\u5b78\" },\n { name: \"\u6797\u9109\u96e8\", initial: \"\u6797\", role: \"\u517c\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\uff0f\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u570b\u969b\u89c0\u5149\u7ba1\u7406\u5b78\u7cfb \u52a9\u7406\u6559\u6388\uff1b\u570b\u85dd\u6703 2025 \u5e74\u5ea6\u5c08\u6848\u97f3\u6a02\u8a55\u8ad6\u4eba\",\n edu: \"\u570b\u7acb\u81fa\u7063\u5e2b\u7bc4\u5927\u5b78 \u97f3\u6a02\u5b78\u7cfb \u535a\u58eb\",\n expert: \"\u6b50\u6d32\u6b4c\u66f2\u53ca\u6b4c\u5287\u6f14\u5531\u3001\u8a6e\u91cb\u8207\u5206\u6790\u3001\u6f14\u5531\u8207\u7814\u7a76\" },\n];\n\nfunction renderFaculty() {\n return FACULTY.map(f => `\n <article class=\"faculty-card\">\n <div class=\"avatar\">${f.initial}<\/div>\n <div class=\"fac-body\">\n <h3 class=\"fac-name\">${f.name}<\/h3>\n <div class=\"fac-meta\">\n <span class=\"tag role\">${f.role}<\/span>\n <span class=\"tag\">${f.creditTag}<\/span>\n <\/div>\n <p class=\"fac-course\">\u6388\u8ab2\u8ab2\u7a0b\uff1a${f.course}<\/p>\n <ul class=\"fac-info\">\n <li><span class=\"lab\">\u73fe\u8077<\/span><span class=\"txt\">${f.current}<\/span><\/li>\n <li><span class=\"lab\">\u5b78\u6b77<\/span><span class=\"txt\">${f.edu}<\/span><\/li>\n <li><span class=\"lab\">\u5c08\u9577<\/span><span class=\"txt\">${f.expert}<\/span><\/li>\n <\/ul>\n <\/div>\n <\/article>\n `).join('');\n}\n\nconst S9_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">IX.<\/span>\n <h2 class=\"sec-title\">\u5e2b\u8cc7\u9663\u5bb9<small>Faculty<\/small><\/h2>\n <\/div>\n <div class=\"faculty-grid\">\n ${renderFaculty()}\n <\/div>\n <\/section>\n`;\n\nclass EUProgramPage extends HTMLElement {\n connectedCallback() {\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <style>${PAGE_CSS}<\/style>\n <article class=\"page\" data-screen-label=\"01 \u6b50\u98a8\u6587\u85dd\u5b78\u7a0b\">\n ${A11Y_HTML}\n ${HERO_HTML}\n ${S1_HTML}\n ${S2_HTML}\n ${S3_HTML}\n ${S4_HTML}\n ${S5_HTML}\n ${S6_HTML}\n ${S7_HTML}\n ${S8_HTML}\n ${S9_HTML}\n <\/article>\n `;\n\n const KEY = 'eu-prog-fs';\n let scale = 'md';\n try { scale = localStorage.getItem(KEY) || 'md'; } catch(e) {}\n if (!['md','lg','xl'].includes(scale)) scale = 'md';\n this.setAttribute('data-scale', scale);\n\n const btns = shadow.querySelectorAll('.a11y-btn');\n const sync = () => {\n const cur = this.getAttribute('data-scale');\n btns.forEach(b => b.setAttribute('aria-pressed', b.dataset.set === cur ? 'true' : 'false'));\n };\n sync();\n btns.forEach(b => b.addEventListener('click', () => {\n const v = b.dataset.set;\n this.setAttribute('data-scale', v);\n try { localStorage.setItem(KEY, v); } catch(e) {}\n sync();\n }));\n }\n}\ncustomElements.define('eu-program-page', EUProgramPage);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":7280,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"[]"},"acf":[],"_links":{"self":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735"}],"collection":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7735"}],"version-history":[{"count":19,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735\/revisions"}],"predecessor-version":[{"id":8065,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735\/revisions\/8065"}],"up":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7280"}],"wp:attachment":[{"href":"\/interacad\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7735,"date":"2026-04-27T10:53:02","date_gmt":"2026-04-27T02:53:02","guid":{"rendered":"\/interacad\/?page_id=7735"},"modified":"2026-05-27T15:17:27","modified_gmt":"2026-05-27T07:17:27","slug":"%e7%89%b9%e8%89%b2%e6%96%87%e5%8c%96%e6%97%85%e9%81%8a%e8%88%87%e6%99%ba%e6%85%a7%e9%81%8a%e6%86%a9%e8%a6%8f%e5%8a%83%e5%ad%b8%e5%88%86%e5%ad%b8%e7%a8%8b","status":"publish","type":"page","link":"\/interacad\/?page_id=7735","title":{"rendered":"\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b"},"content":{"rendered":" $\"\u4e0a\u50b3\u5716\u7247\"$ \n\n\n\n\n\n\n\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@500;600;700;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap\" rel=\"stylesheet\">\n<style>\n html, body { margin: 0; padding: 0; }\n body { font-family: \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif; color: #1f1a17; }\n eu-program-page { display: block; }\n<\/style>\n<\/head>\n<body>\n\n<eu-program-page><\/eu-program-page>\n\n<script>\nconst PAGE_CSS = `\n :host {\n --fs-base: 19px;\n --fs-xs: calc(var(--fs-base) - 2px);\n --fs-sm: calc(var(--fs-base) - 1px);\n --fs-md: var(--fs-base);\n --fs-lg: calc(var(--fs-base) + 3px);\n --fs-xl: calc(var(--fs-base) + 7px);\n --fs-h3: calc(var(--fs-base) + 9px);\n --fs-h2: calc(var(--fs-base) + 15px);\n --fs-h1: calc(var(--fs-base) + 32px);\n --lh-body: 1.85;\n --lh-tight: 1.55;\n\n --ink: #1f1a17;\n --ink-soft: #3a322b;\n --muted: #5a5046;\n --rule: #c8bda9;\n --rule-soft: #ece4d6;\n --primary: #6b2433;\n --primary-dk: #501826;\n --primary-lt: #f5e8eb;\n --accent: #b08947;\n --accent-dk: #7a5b29;\n --accent-lt: #f7eedb;\n --paper: #ffffff;\n --paper-warm: #faf5ec;\n\n --serif: \"Noto Serif TC\", \"Songti TC\", \"PMingLiU\", serif;\n --sans: \"Noto Sans TC\", \"PingFang TC\", \"Microsoft JhengHei\", sans-serif;\n --latin-serif: \"Cormorant Garamond\", \"Noto Serif TC\", serif;\n\n display: block;\n color: var(--ink);\n font-family: var(--sans);\n font-size: var(--fs-md);\n line-height: var(--lh-body);\n -webkit-font-smoothing: antialiased;\n }\n\n :host([data-scale=\"md\"]) { --fs-base: 19px; }\n :host([data-scale=\"lg\"]) { --fs-base: 22px; }\n :host([data-scale=\"xl\"]) { --fs-base: 25px; }\n\n *, *::before, *::after { box-sizing: border-box; }\n\n .page {\n max-width: 1200px;\n width: 100%;\n margin: 0 auto;\n padding: 32px 48px 96px;\n }\n\n .a11y-bar {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 14px;\n padding: 12px 16px;\n margin-bottom: 24px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n }\n .a11y-bar .lbl {\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n font-weight: 700;\n margin-right: 4px;\n }\n .a11y-bar .lbl::before {\n content: \"\ud83d\udd0d \";\n margin-right: 4px;\n }\n .a11y-btn {\n min-width: 56px;\n min-height: 48px;\n padding: 8px 14px;\n background: #fff;\n border: 2px solid var(--primary);\n color: var(--primary);\n font-family: var(--serif);\n font-weight: 700;\n cursor: pointer;\n display: inline-flex; align-items: center; justify-content: center;\n line-height: 1;\n transition: background .15s, color .15s;\n }\n .a11y-btn:hover, .a11y-btn:focus-visible {\n background: var(--primary-lt);\n outline: none;\n }\n .a11y-btn[aria-pressed=\"true\"] {\n background: var(--primary);\n color: #fff;\n }\n .a11y-btn .a { font-size: 18px; }\n .a11y-btn .a.lg { font-size: 22px; }\n .a11y-btn .a.xl { font-size: 26px; }\n\n .hero {\n position: relative;\n border: 1px solid var(--rule);\n padding: 56px 56px 48px;\n background: var(--paper-warm);\n overflow: hidden;\n }\n .hero::before {\n content: \"\";\n position: absolute; inset: 14px;\n border: 1px solid var(--accent);\n pointer-events: none;\n }\n .hero-kicker {\n font-family: var(--latin-serif);\n font-style: italic;\n font-size: var(--fs-lg);\n letter-spacing: .04em;\n color: var(--accent-dk);\n margin: 0 0 14px;\n }\n .hero-kicker .sep { display:inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 12px 4px; }\n .hero h1 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-h1);\n line-height: 1.3;\n letter-spacing: .02em;\n color: var(--primary-dk);\n margin: 0 0 22px;\n }\n .hero-sub {\n font-size: var(--fs-md);\n color: var(--ink-soft);\n max-width: 820px;\n margin: 0 0 32px;\n line-height: 1.85;\n }\n .hero-chips {\n display: flex; flex-wrap: wrap; gap: 12px;\n }\n .chip {\n display: inline-flex; align-items: center;\n padding: 10px 18px;\n font-size: var(--fs-sm);\n letter-spacing: .04em;\n border: 2px solid var(--primary);\n color: var(--primary);\n background: #fff;\n font-weight: 700;\n min-height: 44px;\n }\n .chip.gold { border-color: var(--accent-dk); color: var(--accent-dk); }\n .chip.solid { background: var(--primary); color: #fff; }\n\n section {\n margin-top: 80px;\n }\n .sec-head {\n display: flex; align-items: baseline; gap: 20px;\n margin-bottom: 32px;\n padding-bottom: 20px;\n border-bottom: 2px solid var(--rule);\n }\n .sec-no {\n font-family: var(--latin-serif);\n font-size: calc(var(--fs-base) + 38px);\n font-style: italic;\n font-weight: 700;\n line-height: 1;\n color: var(--accent);\n flex-shrink: 0;\n }\n .sec-title {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-h2);\n color: var(--primary-dk);\n margin: 0;\n letter-spacing: .02em;\n line-height: 1.35;\n }\n .sec-title small {\n display: block;\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 500;\n font-size: var(--fs-sm);\n color: var(--muted);\n letter-spacing: .04em;\n margin-top: 6px;\n }\n\n .info-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n border-top: 1px solid var(--rule);\n border-left: 1px solid var(--rule);\n }\n .info-grid .row {\n display: grid;\n grid-template-columns: 180px 1fr;\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n }\n .info-grid .k {\n background: var(--paper-warm);\n color: var(--primary);\n font-weight: 700;\n padding: 18px 20px;\n border-right: 1px solid var(--rule);\n font-size: var(--fs-md);\n }\n .info-grid .v {\n padding: 18px 20px;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n }\n .info-grid .row.full { grid-column: 1 \/ -1; }\n\n .goal-list {\n list-style: none;\n margin: 0; padding: 0;\n display: grid;\n gap: 18px;\n counter-reset: g;\n }\n .goal-list li {\n position: relative;\n padding: 22px 26px 22px 72px;\n background: #fff;\n border-left: 5px solid var(--primary);\n border-top: 1px solid var(--rule);\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n font-size: var(--fs-md);\n line-height: 1.85;\n color: var(--ink-soft);\n }\n .goal-list li::before {\n content: counter(g, decimal-leading-zero);\n counter-increment: g;\n position: absolute;\n left: 22px; top: 20px;\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 8px);\n color: var(--accent-dk);\n }\n\n .pillar-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n .pillar {\n position: relative;\n padding: 36px 26px 30px;\n background: var(--paper);\n border: 1px solid var(--rule);\n overflow: hidden;\n }\n .pillar::before {\n content: \"\";\n position: absolute; left: 0; top: 0; right: 0;\n height: 8px;\n background: var(--primary);\n }\n .pillar:nth-child(2)::before { background: #a83a2e; }\n .pillar:nth-child(3)::before { background: #1f5e7a; }\n .pillar:nth-child(4)::before { background: var(--accent-dk); }\n .pillar .flag {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 600;\n font-size: var(--fs-sm);\n color: var(--muted);\n margin-bottom: 14px;\n letter-spacing: .08em;\n text-transform: uppercase;\n }\n .pillar h3 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-lg);\n margin: 0 0 12px;\n color: var(--ink);\n line-height: 1.4;\n }\n .pillar p {\n margin: 0;\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n line-height: 1.75;\n }\n .pillar .ord {\n position: absolute;\n right: 16px; top: 14px;\n font-family: var(--latin-serif);\n font-weight: 700;\n font-style: italic;\n font-size: calc(var(--fs-base) + 16px);\n color: var(--rule);\n }\n\n \/* ---------- \u5b78\u671f\u5340\u584a\u6a19\u984c ---------- *\/\n .term-section {\n margin-bottom: 12px;\n }\n .term-heading {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 20px;\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n letter-spacing: .06em;\n margin-bottom: 0;\n }\n .term-heading .term-badge {\n display: inline-block;\n background: rgba(255,255,255,.2);\n padding: 4px 12px;\n font-size: var(--fs-xs);\n letter-spacing: .04em;\n font-family: var(--sans);\n font-weight: 500;\n }\n\n .method-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n border-top: 1px solid var(--rule);\n border-left: 1px solid var(--rule);\n }\n .method {\n padding: 32px 24px;\n border-right: 1px solid var(--rule);\n border-bottom: 1px solid var(--rule);\n background: #fff;\n }\n .method .ico {\n width: 44px; height: 44px;\n color: var(--primary);\n margin-bottom: 18px;\n }\n .method h4 {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n margin: 0 0 8px;\n line-height: 1.4;\n }\n .method p {\n margin: 0;\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n line-height: 1.7;\n }\n\n .outcome-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 22px;\n }\n .outcome {\n padding: 32px 28px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n }\n .outcome .num {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 24px);\n color: var(--accent);\n line-height: 1;\n margin-bottom: 14px;\n }\n .outcome p {\n margin: 0;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n line-height: 1.8;\n }\n\n .reg-panel {\n border: 1px solid var(--rule);\n background: #fff;\n }\n .reg-row {\n display: grid;\n grid-template-columns: 220px 1fr;\n border-bottom: 1px solid var(--rule);\n }\n .reg-row:last-child { border-bottom: 0; }\n .reg-row .lab {\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n padding: 24px 22px;\n font-size: var(--fs-md);\n display: flex; align-items: center;\n }\n .reg-row .val {\n padding: 24px 26px;\n color: var(--ink-soft);\n font-size: var(--fs-md);\n line-height: 1.8;\n }\n .reg-row .val .em {\n color: var(--primary-dk);\n font-weight: 700;\n }\n .reg-row .val .credit {\n display: inline-block;\n background: var(--accent-lt);\n color: var(--accent-dk);\n padding: 4px 12px;\n font-weight: 700;\n font-size: var(--fs-sm);\n margin-left: 8px;\n }\n\n .table-wrap { width: 100%; }\n table.courses {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--fs-md);\n }\n table.courses thead th {\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n padding: 18px 18px;\n text-align: left;\n border-right: 1px solid rgba(255,255,255,.15);\n font-size: var(--fs-md);\n letter-spacing: .04em;\n }\n table.courses thead th:last-child { border-right: 0; }\n table.courses tbody td {\n padding: 20px 18px;\n border-bottom: 1px solid var(--rule);\n color: var(--ink-soft);\n vertical-align: middle;\n line-height: 1.7;\n }\n table.courses tbody tr.term-row td {\n background: var(--paper-warm);\n border-top: 3px solid var(--primary);\n padding: 12px 18px;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n color: var(--primary-dk);\n letter-spacing: .04em;\n }\n table.courses tbody tr:not(.term-row):hover td { background: var(--paper-warm); }\n table.courses .cname {\n color: var(--ink);\n font-weight: 700;\n font-family: var(--serif);\n font-size: var(--fs-md);\n line-height: 1.55;\n }\n table.courses .cname .sub {\n display: block;\n color: var(--muted);\n font-family: var(--sans);\n font-weight: 500;\n font-size: var(--fs-xs);\n margin-top: 4px;\n }\n table.courses .pill {\n display: inline-block;\n padding: 6px 12px;\n font-size: var(--fs-xs);\n font-weight: 700;\n font-family: var(--latin-serif);\n font-style: italic;\n letter-spacing: .04em;\n border: 2px solid var(--accent-dk);\n color: var(--accent-dk);\n background: #fff;\n white-space: nowrap;\n }\n table.courses .pill.core { background: var(--primary); color: #fff; border-color: var(--primary); font-family: var(--sans); font-style: normal; }\n table.courses td.credits {\n font-family: var(--latin-serif);\n font-style: italic;\n font-weight: 700;\n font-size: calc(var(--fs-base) + 8px);\n color: var(--primary);\n text-align: center;\n width: 100px;\n }\n table.courses td.credits .lbl {\n display: block;\n font-family: var(--sans);\n font-style: normal;\n font-weight: 500;\n font-size: var(--fs-xs);\n color: var(--muted);\n margin-top: 2px;\n }\n table.courses td.teacher {\n font-weight: 700;\n color: var(--ink);\n white-space: nowrap;\n width: 120px;\n font-size: var(--fs-md);\n }\n table.courses td.term {\n color: var(--ink-soft);\n font-size: var(--fs-sm);\n width: 200px;\n }\n\n .course-cards { display: none; }\n\n \/* \u624b\u6a5f\u7248\u5b78\u671f\u6a19\u984c *\/\n .ccard-term-head {\n padding: 12px 16px;\n background: var(--primary);\n color: #fff;\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n letter-spacing: .06em;\n margin-top: 12px;\n }\n\n .core-panel {\n border: 1px solid var(--rule);\n background: var(--paper-warm);\n padding: 40px 44px;\n }\n .core-panel .ribbon {\n display: inline-block;\n background: var(--primary);\n color: #fff;\n padding: 6px 16px;\n font-size: var(--fs-sm);\n font-weight: 700;\n letter-spacing: .08em;\n margin-bottom: 16px;\n }\n .core-panel h3 {\n font-family: var(--serif);\n font-size: var(--fs-h3);\n color: var(--primary-dk);\n margin: 0 0 16px;\n font-weight: 700;\n line-height: 1.4;\n }\n .core-panel .lead {\n color: var(--ink-soft);\n font-size: var(--fs-md);\n margin: 0 0 14px;\n line-height: 1.85;\n }\n .core-panel .star {\n color: var(--accent-dk);\n font-weight: 700;\n font-size: var(--fs-md);\n margin: 22px 0 28px;\n }\n .core-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-top: 8px;\n }\n .core-item {\n background: #fff;\n border: 1px solid var(--rule);\n padding: 26px 26px;\n }\n .core-item h4 {\n font-family: var(--serif);\n font-size: var(--fs-lg);\n margin: 0 0 10px;\n color: var(--primary);\n display: flex; align-items: center; gap: 10px;\n line-height: 1.4;\n }\n .core-item h4::before {\n content: \"\";\n width: 8px; height: 8px; background: var(--accent);\n display: inline-block;\n }\n .core-item p {\n margin: 0;\n font-size: var(--fs-md);\n color: var(--ink-soft);\n line-height: 1.8;\n }\n .core-note {\n margin-top: 28px;\n padding: 22px 26px;\n background: #fff;\n border-left: 5px solid var(--accent);\n font-size: var(--fs-md);\n color: var(--ink-soft);\n line-height: 1.85;\n }\n .core-note .lnk {\n color: var(--primary);\n text-decoration: underline;\n word-break: break-all;\n font-weight: 700;\n }\n\n .faculty-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 26px;\n }\n .faculty-card {\n display: grid;\n grid-template-columns: 140px 1fr;\n gap: 28px;\n padding: 32px;\n background: #fff;\n border: 1px solid var(--rule);\n position: relative;\n }\n .faculty-card::before {\n content: \"\";\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 5px;\n background: var(--primary);\n }\n .avatar {\n width: 140px; height: 140px;\n background: var(--paper-warm);\n border: 1px solid var(--rule);\n display: flex; align-items: center; justify-content: center;\n font-family: var(--serif);\n font-size: calc(var(--fs-base) + 38px);\n color: var(--primary);\n font-weight: 700;\n letter-spacing: .04em;\n }\n .fac-body { min-width: 0; }\n .fac-name {\n font-family: var(--serif);\n font-size: var(--fs-h3);\n font-weight: 700;\n color: var(--ink);\n margin: 0 0 8px;\n letter-spacing: .04em;\n line-height: 1.3;\n }\n .fac-meta {\n display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;\n }\n .fac-meta .tag {\n font-size: var(--fs-xs);\n padding: 5px 12px;\n background: var(--primary-lt);\n color: var(--primary-dk);\n font-weight: 700;\n letter-spacing: .04em;\n }\n .fac-meta .tag.role { background: var(--accent-lt); color: var(--accent-dk); }\n .fac-course {\n font-size: var(--fs-sm);\n color: var(--ink-soft);\n margin: 0 0 18px;\n line-height: 1.7;\n padding-bottom: 16px;\n border-bottom: 1px dashed var(--rule);\n }\n .fac-info { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }\n .fac-info li {\n display: grid;\n grid-template-columns: 64px 1fr;\n gap: 14px;\n font-size: var(--fs-sm);\n line-height: 1.7;\n }\n .fac-info li .lab {\n color: var(--primary);\n font-weight: 700;\n }\n .fac-info li .txt { color: var(--ink-soft); }\n\n @media (max-width: 900px) {\n :host { --fs-base: 18px; }\n :host([data-scale=\"lg\"]) { --fs-base: 21px; }\n :host([data-scale=\"xl\"]) { --fs-base: 24px; }\n\n .page { padding: 20px 18px 64px; }\n .a11y-bar { gap: 8px; padding: 10px 12px; flex-wrap: wrap; justify-content: center; }\n .a11y-bar .lbl { width: 100%; text-align: center; margin-bottom: 4px; margin-right: 0; }\n\n .hero { padding: 36px 24px 32px; }\n .hero::before { inset: 10px; }\n .hero h1 { font-size: calc(var(--fs-base) + 16px); }\n .hero-sub { font-size: var(--fs-md); }\n\n section { margin-top: 56px; }\n .sec-head { gap: 14px; margin-bottom: 24px; padding-bottom: 16px; }\n .sec-no { font-size: calc(var(--fs-base) + 22px); }\n .sec-title { font-size: calc(var(--fs-base) + 6px); }\n\n .info-grid { grid-template-columns: 1fr; }\n .info-grid .row { grid-template-columns: 120px 1fr; }\n .info-grid .k { padding: 14px 14px; }\n .info-grid .v { padding: 14px 14px; }\n\n .goal-list li { padding: 18px 18px 18px 60px; }\n\n .pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }\n .pillar { padding: 28px 20px 22px; }\n\n .method-grid { grid-template-columns: repeat(2, 1fr); }\n .method { padding: 24px 18px; }\n\n .outcome-grid { grid-template-columns: 1fr; }\n\n .reg-row { grid-template-columns: 1fr; }\n .reg-row .lab { padding: 14px 18px; }\n .reg-row .val { padding: 18px; }\n\n .table-wrap { display: none; }\n .course-cards {\n display: grid;\n gap: 12px;\n }\n .ccard {\n background: #fff;\n border: 1px solid var(--rule);\n border-left: 5px solid var(--primary);\n padding: 20px 20px;\n }\n .ccard .cname {\n font-family: var(--serif);\n font-weight: 700;\n font-size: var(--fs-md);\n color: var(--ink);\n margin-bottom: 12px;\n line-height: 1.55;\n }\n .ccard .crow {\n display: grid;\n grid-template-columns: 76px 1fr;\n gap: 10px;\n padding: 8px 0;\n font-size: var(--fs-sm);\n border-top: 1px dashed var(--rule);\n line-height: 1.65;\n }\n .ccard .crow:first-of-type { border-top: 0; padding-top: 10px; }\n .ccard .crow .k { color: var(--primary); font-weight: 700; }\n .ccard .crow .v { color: var(--ink-soft); }\n\n .core-panel { padding: 28px 22px; }\n .core-grid { grid-template-columns: 1fr; gap: 14px; }\n .core-item { padding: 22px 22px; }\n\n .faculty-grid { grid-template-columns: 1fr; gap: 18px; }\n .faculty-card { grid-template-columns: 96px 1fr; padding: 22px; gap: 18px; }\n .avatar { width: 96px; height: 96px; font-size: calc(var(--fs-base) + 18px); }\n .fac-info li { grid-template-columns: 56px 1fr; }\n }\n\n @media (max-width: 480px) {\n .pillar-grid { grid-template-columns: 1fr; }\n .method-grid { grid-template-columns: 1fr; }\n .faculty-card { grid-template-columns: 1fr; text-align: center; }\n .faculty-card::before { display: none; }\n .avatar { margin: 0 auto; }\n .fac-meta { justify-content: center; }\n .fac-info li { text-align: left; }\n }\n`;\n\nconst A11Y_HTML = `\n <div class=\"a11y-bar\" role=\"region\" aria-label=\"\u5b57\u7d1a\u8abf\u6574\u5de5\u5177\u5217\">\n <span class=\"lbl\">\u5b57\u7d1a\u8abf\u6574<\/span>\n <button class=\"a11y-btn\" data-set=\"md\" aria-label=\"\u6a19\u6e96\u5b57\u7d1a\" type=\"button\"><span class=\"a\">\u6a19\u6e96<\/span><\/button>\n <button class=\"a11y-btn\" data-set=\"lg\" aria-label=\"\u653e\u5927\u5b57\u7d1a\" type=\"button\"><span class=\"a lg\">\u653e\u5927<\/span><\/button>\n <button class=\"a11y-btn\" data-set=\"xl\" aria-label=\"\u7279\u5927\u5b57\u7d1a\" type=\"button\"><span class=\"a xl\">\u7279\u5927<\/span><\/button>\n <\/div>\n`;\n\nconst HERO_HTML = `\n <header class=\"hero\">\n <p class=\"hero-kicker\">European Arts <span class=\"sep\"><\/span> Cross-Cultural Dialogue<\/p>\n <h1>\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71<br>\u5b78\u5206\u5b78\u7a0b<\/h1>\n <p class=\"hero-sub\">\u4ee5\u300c\u4e09\u8a9e\u4e00\u85dd\u300d\u70ba\u6838\u5fc3\uff0c\u7d50\u5408\u897f\u73ed\u7259\u8a9e\u3001\u6cd5\u8a9e\u3001\u4fc4\u8a9e\u8207\u6b50\u6d32\u97f3\u6a02\u6587\u5316\uff0c\u57f9\u990a\u8de8\u6587\u5316\u7406\u89e3\u3001\u751f\u6daf\u8f49\u578b\u7d20\u990a\u8207\u7b2c\u4e8c\u5c08\u9577\u80fd\u529b\u3002\u4e2d\u6587\u6388\u8ab2\uff0c\u4e0d\u8a2d\u8a9e\u8a00\u8003\u8a66\u9580\u6abb\u3002<\/p>\n <div class=\"hero-chips\">\n <span class=\"chip solid\">\u8a9e\u8a00\u8207\u8de8\u6587\u5316\u6e9d\u901a\u985e<\/span>\n <span class=\"chip\">\u6a21\u7d44\u4e8c\uff1a\u751f\u6daf\u8f49\u578b\u8a2d\u8a08<\/span>\n <span class=\"chip gold\">\u7e3d\u8a08 18 \u5b78\u5206\u30fb9 \u9580\u8ab2<\/span>\n <\/div>\n <\/header>\n`;\n\nconst S1_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">I.<\/span>\n <h2 class=\"sec-title\">\u5b78\u7a0b\u57fa\u672c\u8cc7\u8a0a<small>Program Overview<\/small><\/h2>\n <\/div>\n <div class=\"info-grid\">\n <div class=\"row\"><div class=\"k\">\u5b78\u7a0b\u540d\u7a31<\/div><div class=\"v\">\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u5b78\u7a0b\u985e\u5225<\/div><div class=\"v\">\u8a9e\u8a00\u8207\u8de8\u6587\u5316\u6e9d\u901a\u985e<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u6240\u5c6c\u6a21\u7d44<\/div><div class=\"v\">\u6a21\u7d44\u4e8c\uff1a\u751f\u6daf\u8f49\u578b\u8a2d\u8a08<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u627f\u8fa6\u55ae\u4f4d<\/div><div class=\"v\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u6587\u7d44<\/div><\/div>\n <div class=\"row full\"><div class=\"k\">\u5354\u540c\u6388\u8ab2<\/div><div class=\"v\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb \u2500\u2500 \u897f\u6587\u7d44\u3001\u6cd5\u6587\u7d44\u3001\u4fc4\u6587\u7d44<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u7e3d\u5b78\u5206\u6578<\/div><div class=\"v\">18 \u5b78\u5206<\/div><\/div>\n <div class=\"row\"><div class=\"k\">\u7e3d\u8ab2\u7a0b\u6578<\/div><div class=\"v\">\u5171 9 \u9580\u8ab2\uff08\u542b\u4e0a\u3001\u4e0b\u5b78\u671f\uff09<\/div><\/div>\n <div class=\"row full\"><div class=\"k\">\u4e0a\u8ab2\u5730\u9ede<\/div><div class=\"v\">\u6de1\u6c5f\u5927\u5b78 \u53f0\u5317\u6821\u5712<\/div><\/div>\n <\/div>\n <\/section>\n`;\n\nconst S2_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">II.<\/span>\n <h2 class=\"sec-title\">\u5b78\u7a0b\u76ee\u6a19<small>Program Objectives<\/small><\/h2>\n <\/div>\n <ol class=\"goal-list\">\n <li>\u5efa\u7acb\u6b50\u6d32\u8a9e\u8a00\u8207\u6587\u5316\u4e4b\u5165\u9580\u6e9d\u901a\u80fd\u529b\uff0c\u57f9\u990a\u57fa\u672c\u8de8\u6587\u5316\u7406\u89e3\u8207\u4e92\u52d5\u7d20\u990a\uff08\u4e0d\u4ee5\u8a9e\u8a00\u8003\u8a66\u6216\u80fd\u529b\u8a8d\u8b49\u70ba\u4e3b\u8981\u76ee\u6a19\uff09\u3002<\/li>\n <li>\u57f9\u990a\u8de8\u6587\u5316\u7d20\u990a\uff0c\u62d3\u5c55\u7b2c\u4e8c\u5c08\u9577\u8207\u659c\u69d3\u4eba\u751f\u7684\u53ef\u80fd\u6027\u3002<\/li>\n <li>\u900f\u904e\u897f\u73ed\u7259\u8a9e\u3001\u6cd5\u8a9e\u3001\u4fc4\u8a9e\u53ca\u6b50\u6d32\u97f3\u6a02\u6587\u5316\uff0c\u652f\u6301\u5b78\u54e1\u751f\u6daf\u8f49\u578b\u8207\u4eba\u751f\u518d\u5b9a\u4f4d\u3002<\/li>\n <\/ol>\n <\/section>\n`;\n\nconst S3_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">III.<\/span>\n <h2 class=\"sec-title\">\u8ab2\u7a0b\u5167\u5bb9\u65b9\u5411<small>\"\u4e09\u8a9e\u4e00\u85dd\" \u2014 Three Languages, One Art<\/small><\/h2>\n <\/div>\n <div class=\"pillar-grid\">\n <div class=\"pillar\">\n <span class=\"ord\">01<\/span>\n <div class=\"flag\">Espa\u00f1ol<\/div>\n <h3>\u897f\u73ed\u7259\u8a9e\u6587\u5316<\/h3>\n <p>\u5f9e\u98f2\u98df\u3001\u6587\u5b78\u5230\u751f\u6d3b\u6558\u4e8b\uff0c\u8d70\u5165\u897f\u8a9e\u4e16\u754c\u7684\u820c\u5c16\u8207\u6587\u5316\u5be6\u8e10\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">02<\/span>\n <div class=\"flag\">Fran\u00e7ais<\/div>\n <h3>\u6cd5\u8a9e\u6587\u5316<\/h3>\n <p>\u5f9e\u57fa\u790e\u6cd5\u8a9e\u5165\u9580\u5230\u65c5\u904a\u6587\u5316\u9ad4\u9a57\uff0c\u7406\u89e3\u6cd5\u862d\u897f\u8a9e\u8a00\u8207\u751f\u6d3b\u7f8e\u5b78\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">03<\/span>\n <div class=\"flag\">\u0420\u0443\u0441\u0441\u043a\u0438\u0439<\/div>\n <h3>\u4fc4\u8a9e\u6587\u5316<\/h3>\n <p>\u900f\u904e\u7d93\u5178\u6587\u85dd\u8207\u93e1\u982d\u5f71\u50cf\uff0c\u8a8d\u8b58\u4fc4\u7f85\u65af\u7684\u793e\u6703\u8108\u7d61\u8207\u5bb6\u5ead\u8b70\u984c\u3002<\/p>\n <\/div>\n <div class=\"pillar\">\n <span class=\"ord\">04<\/span>\n <div class=\"flag\">Classical music<\/div>\n <h3>\u6b50\u6d32\u97f3\u6a02\u85dd\u8853<\/h3>\n <p>\u5f9e\u7dad\u4e5f\u7d0d\u3001\u9ed1\u68ee\u6797\u5230\u6cd5\u3001\u897f\u3001\u4fc4\u7684\u6d6a\u6f2b\u6a02\u6d3e\uff0c\u8046\u807d\u6b50\u6d32\u97f3\u6a02\u53f2\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst ICONS = {\n classroom: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"6\" y=\"9\" width=\"28\" height=\"20\"\/><path d=\"M6 29l14 5 14-5\"\/><circle cx=\"20\" cy=\"19\" r=\"3\"\/><\/svg>`,\n talk: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M7 11h18v14H15l-4 4v-4H7z\"\/><path d=\"M19 17h22v12H35l-4 4v-4h-7\"\/><\/svg>`,\n digital: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"5\" y=\"9\" width=\"30\" height=\"20\"\/><path d=\"M14 33h12M20 29v4\"\/><path d=\"M12 17l-3 3 3 3M28 17l3 3-3 3M22 16l-4 8\"\/><\/svg>`,\n art: `<svg viewBox=\"0 0 40 40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M20 6c-8 0-14 6-14 13 0 5 4 8 8 8 2 0 3 1 3 3s-1 4 3 4c8 0 14-6 14-14S28 6 20 6z\"\/><circle cx=\"13\" cy=\"16\" r=\"2\"\/><circle cx=\"20\" cy=\"13\" r=\"2\"\/><circle cx=\"27\" cy=\"16\" r=\"2\"\/><circle cx=\"29\" cy=\"22\" r=\"2\"\/><\/svg>`\n};\n\nconst S4_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">IV.<\/span>\n <h2 class=\"sec-title\">\u5be6\u65bd\u65b9\u6cd5<small>Teaching Methods<\/small><\/h2>\n <\/div>\n <div class=\"method-grid\">\n <div class=\"method\">\n <div class=\"ico\">${ICONS.classroom}<\/div>\n <h4>\u50b3\u7d71\u8ab2\u5802\u4e0a\u8ab2<\/h4>\n <p>\u4ee5\u4e2d\u6587\u6388\u8ab2\u70ba\u4e3b\uff0c\u4e0d\u8a2d\u8a9e\u8a00\u80fd\u529b\u9580\u6abb\uff0c\u8f15\u9b06\u5165\u9580\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.talk}<\/div>\n <h4>\u8b1b\u5ea7\u8207\u5206\u7d44\u8a0e\u8ad6<\/h4>\n <p>\u4e3b\u984c\u5f0f\u8b1b\u5ea7\u642d\u914d\u5c0f\u7d44\u5c0d\u8a71\uff0c\u6df1\u5316\u8de8\u6587\u5316\u601d\u8003\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.digital}<\/div>\n <h4>\u6578\u4f4d\u7db2\u7d61\u6559\u5b78<\/h4>\n <p>\u540c\u6b65\uff0f\u975e\u540c\u6b65\u7dda\u4e0a\u6559\u5b78\uff0c\u9748\u6d3b\u914d\u5408\u5b78\u54e1\u751f\u6d3b\u7bc0\u594f\u3002<\/p>\n <\/div>\n <div class=\"method\">\n <div class=\"ico\">${ICONS.art}<\/div>\n <h4>\u85dd\u8853\u6b23\u8cde\u8207\u6587\u5316\u9ad4\u9a57<\/h4>\n <p>\u97f3\u6a02\u3001\u6587\u5b78\u3001\u5f71\u50cf\u3001\u98f2\u98df\uff0c\u591a\u611f\u5b98\u6d78\u6f64\u6b50\u6d32\u6587\u5316\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst S5_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">V.<\/span>\n <h2 class=\"sec-title\">\u9810\u671f\u6210\u6548<small>Expected Outcomes<\/small><\/h2>\n <\/div>\n <div class=\"outcome-grid\">\n <div class=\"outcome\">\n <div class=\"num\">01<\/div>\n <p>\u57f9\u990a\u5b78\u54e1\u5c0d\u6b50\u6d32\u4e0d\u540c\u6587\u5316\u8108\u7d61\u3001\u793e\u6703\u7d50\u69cb\u8207\u50f9\u503c\u89c0\u4e4b\u7406\u89e3\u3002<\/p>\n <\/div>\n <div class=\"outcome\">\n <div class=\"num\">02<\/div>\n <p>\u5354\u52a9\u5b78\u54e1\u5c07\u8de8\u6587\u5316\u5b78\u7fd2\uff0c\u8f49\u5316\u70ba\u5c0d\u8077\u6daf\u3001\u751f\u6d3b\u8207\u4eba\u751f\u65b9\u5411\u7684\u91cd\u65b0\u601d\u8003\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst S6_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VI.<\/span>\n <h2 class=\"sec-title\">\u4fee\u8ab2\u898f\u5b9a<small>Course Requirements<\/small><\/h2>\n <\/div>\n <div class=\"reg-panel\">\n <div class=\"reg-row\">\n <div class=\"lab\">\u627f\u8fa6\u55ae\u4f4d<\/div>\n <div class=\"val\"><span class=\"em\">\u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u6587\u7d44<\/span><\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u6838\u5fc3\u8ab2\u7a0b<\/div>\n <div class=\"val\">\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b<span class=\"credit\">2 \u5b78\u5206<\/span><\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u5c08\u696d\u8ab2\u7a0b<\/div>\n <div class=\"val\">\n \u300c\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\u300d\u3001\u300c\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\u300d\u3001\u300c\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\u300d\u3001\u300c\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\u300d\u3001\u300c\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\u300d\u3001\u300c\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\u300d\u3001\u300c\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\u300d\u3001\u300c\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\u300d\n <span style=\"display:block; margin-top:6px; color:var(--muted); font-size:var(--fs-xs);\">\u5171 <span style=\"color:var(--primary-dk); font-weight:700;\">8 \u9580\u8ab2\uff0c16\u5b78\u5206<\/span><\/span>\n <\/div>\n <\/div>\n <div class=\"reg-row\">\n <div class=\"lab\">\u7e3d\u8a08<\/div>\n <div class=\"val\">\u5171 <span class=\"em\">9 \u9580\u8ab2<\/span>\uff0c\u7e3d\u4fee\u7fd2\u5b78\u5206\u9808\u9054 <span class=\"em\">18 \u5b78\u5206<\/span><\/div>\n <\/div>\n <\/div>\n <\/section>\n`;\n\n\/\/ \u2500\u2500 \u4fee\u6b63\u5f8c\u8ab2\u7a0b\u8cc7\u6599\uff1a\u4e0a\u5b78\u671f\uff1d\u897f\u8a9e\uff0b\u6cd5\u8a9e\uff0c\u4e0b\u5b78\u671f\uff1d\u4fc4\u8a9e\uff0b\u97f3\u6a02 \u2500\u2500\nconst COURSES_S1 = [\n { name: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\", sub: \"\u897f\u73ed\u7259\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u5289\u8389\u7f8e\", pill: \"Espa\u00f1ol\" },\n { name: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\", sub: \"\u897f\u73ed\u7259\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u5289\u8389\u7f8e\", pill: \"Espa\u00f1ol\" },\n { name: \"\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\", sub: \"\u6cd5\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u9673\u9e97\u5a1f\", pill: \"Fran\u00e7ais\" },\n { name: \"\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\", sub: \"\u6cd5\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u9673\u9e97\u5a1f\", pill: \"Fran\u00e7ais\" },\n];\nconst COURSES_S2 = [\n { name: \"\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\", sub: \"\u4fc4\u8a9e\u6587\u5316\", credits: \"2\", credits_label: \"\", teacher: \"\u912d\u76c8\u76c8\", pill: \"\u0420\u0443\u0441\u0441\u043a\u0438\u0439\" },\n { name: \"\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\", sub: \"\u4fc4\u8a9e\u6587\u5316\", credits: \"2\", teacher: \"\u912d\u76c8\u76c8\", pill: \"\u0420\u0443\u0441\u0441\u043a\u0438\u0439\" },\n { name: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\", sub: \"\u6b50\u6d32\u97f3\u6a02\u85dd\u8853\", credits: \"2\", credits_label: \"\", teacher: \"\u6797\u9109\u96e8\", pill: \"Classical music\" },\n { name: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\", sub: \"\u6b50\u6d32\u97f3\u6a02\u85dd\u8853\", credits: \"2\", credits_label: \"\", teacher: \"\u6797\u9109\u96e8\", pill: \"Classical music\" },\n];\nconst COURSE_CORE = { name: \"\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\", sub: \"\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b\", credits: \"2\", teacher: \"\u9b4f\u60e0\u5a1f\", pill: \"\u6838\u5fc3\u5fc5\u4fee\", core: true };\n\nfunction courseRow(c, isFirst) {\n const cls = isFirst ? 'group-start' : '';\n const creditCell = c.credits\n ? `<td class=\"credits\">${c.credits}<span class=\"lbl\">${c.credits_label || '\u5b78\u5206'}<\/span><\/td>`\n : `<td class=\"credits\" style=\"color:var(--rule);\">\u2014<\/td>`;\n const pillCls = c.core ? 'pill core' : 'pill';\n return `\n <tr class=\"${cls}\">\n <td><div class=\"cname\">${c.name}<span class=\"sub\">${c.sub}<\/span><\/div><\/td>\n ${creditCell}\n <td><span class=\"${pillCls}\">${c.pill}<\/span><\/td>\n <td class=\"teacher\">${c.teacher}<\/td>\n <\/tr>`;\n}\n\nfunction termRow(label) {\n return `<tr class=\"term-row\"><td colspan=\"4\">${label}<\/td><\/tr>`;\n}\n\nfunction renderCourseTable() {\n const coreRows = courseRow(COURSE_CORE, true);\n const s1Rows = COURSES_S1.map((c,i) => courseRow(c, i===0)).join('');\n const s2Rows = COURSES_S2.map((c,i) => courseRow(c, i===0)).join('');\n return `\n <div class=\"table-wrap\">\n <table class=\"courses\">\n <thead>\n <tr>\n <th>\u8ab2\u7a0b\u540d\u7a31<\/th>\n <th style=\"text-align:center;\">\u5b78\u5206<\/th>\n <th>\u985e\u5225<\/th>\n <th>\u6388\u8ab2\u6559\u5e2b<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n ${termRow('\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b')}\n ${coreRows}\n ${termRow('115 \u5b78\u5e74\u5ea6 \u7b2c 1 \u5b78\u671f \u2500\u2500 \u897f\u73ed\u7259\u8a9e\u6587\u5316\u30fb\u6cd5\u8a9e\u6587\u5316')}\n ${s1Rows}\n ${termRow('115 \u5b78\u5e74\u5ea6 \u7b2c 2 \u5b78\u671f \u2500\u2500 \u4fc4\u8a9e\u6587\u5316\u30fb\u6b50\u6d32\u97f3\u6a02\u85dd\u8853')}\n ${s2Rows}\n <\/tbody>\n <\/table>\n <\/div>\n `;\n}\n\nfunction courseCard(c) {\n return `\n <div class=\"ccard\">\n <div class=\"cname\">${c.name}<\/div>\n <div class=\"crow\"><span class=\"k\">\u985e\u5225<\/span><span class=\"v\">${c.sub}\uff08${c.pill}\uff09<\/span><\/div>\n <div class=\"crow\"><span class=\"k\">\u5b78\u5206<\/span><span class=\"v\">${c.credits ? c.credits + ' \u5b78\u5206' + (c.credits_label ? '\uff08' + c.credits_label + '\uff09' : '') : '\u540c\u4e0a\u8ab2\u5408\u8a08'}<\/span><\/div>\n <div class=\"crow\"><span class=\"k\">\u6559\u5e2b<\/span><span class=\"v\">${c.teacher}<\/span><\/div>\n <\/div>`;\n}\n\nfunction renderCourseCards() {\n return `\n <div class=\"course-cards\">\n <div class=\"ccard-term-head\">\u6838\u5fc3\u5fc5\u4fee<\/div>\n ${courseCard(COURSE_CORE)}\n <div class=\"ccard-term-head\">\u7b2c 1 \u5b78\u671f \u2500\u2500 \u897f\u73ed\u7259\u8a9e\u6587\u5316\u30fb\u6cd5\u8a9e\u6587\u5316<\/div>\n ${COURSES_S1.map(courseCard).join('')}\n <div class=\"ccard-term-head\">\u7b2c 2 \u5b78\u671f \u2500\u2500 \u4fc4\u8a9e\u6587\u5316\u30fb\u6b50\u6d32\u97f3\u6a02\u85dd\u8853<\/div>\n ${COURSES_S2.map(courseCard).join('')}\n <\/div>`;\n}\n\nconst S7_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VII.<\/span>\n <h2 class=\"sec-title\">\u8ab2\u7a0b\u8868<small>Curriculum<\/small><\/h2>\n <\/div>\n ${renderCourseTable()}\n ${renderCourseCards()}\n <\/section>\n`;\n\nconst S8_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">VIII.<\/span>\n <h2 class=\"sec-title\">\u6838\u5fc3\u5fc5\u4fee\u8ab2\u7a0b\u8aaa\u660e<small>Core Course<\/small><\/h2>\n <\/div>\n <div class=\"core-panel\">\n <span class=\"ribbon\">\u6838\u5fc3\u5fc5\u4fee\u30fb2 \u5b78\u5206<\/span>\n <h3>\u300a\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\u300b<\/h3>\n <p class=\"lead\">\u672c\u8ab2\u7a0b\u63a1\u5168\u9060\u8ddd\u65b9\u5f0f\u6559\u5b78\uff0c\u5305\u542b\u540c\u6b65\u8207\u975e\u540c\u6b65\u8996\u8a0a\u6559\u5b78\u3001\u7dda\u4e0a\u7559\u8a00\u8a0e\u8ad6\u8207\u7dda\u4e0a\u6e2c\u9a57\u7b49\u591a\u5143\u5b78\u7fd2\u5f62\u5f0f\u3002<\/p>\n <p class=\"star\">\u2605 \u50c5 1 \u6b21\u540c\u6b65\u8996\u8a0a\u9762\u6388\uff08Webex\uff09 \u2605<\/p>\n <div class=\"core-grid\">\n <div class=\"core-item\">\n <h4>\u975e\u540c\u6b65\u6578\u4f4d\u6559\u6750<\/h4>\n <p>\u7531\u6388\u8ab2\u6559\u5e2b\u4f9d\u8ab2\u7a0b\u55ae\u5143\u4e3b\u984c\u9032\u5ea6\uff0c\u900f\u904e\u6578\u4f4d\u6559\u6750\u9032\u884c\u6388\u8ab2\uff0c\u5b78\u54e1\u4f9d\u7167\u5404\u9031\u9032\u5ea6\u89c0\u770b\u6578\u4f4d\u6559\u6750\u5167\u5bb9\u3002<\/p>\n <\/div>\n <div class=\"core-item\">\n <h4>\u7dda\u4e0a\u7559\u8a00\u8a0e\u8ad6<\/h4>\n <p>\u7531\u6388\u8ab2\u6559\u5e2b\u5f15\u5c0e\u5b78\u54e1\uff0c\u900f\u904e\u6578\u4f4d\u5e73\u53f0\u7559\u8a00\u677f\u9032\u884c\u8a0e\u8ad6\uff1b\u5b78\u54e1\u53ef\u65bc\u8a0e\u8ad6\u5340\u63d0\u51fa\u554f\u984c\uff0c\u518d\u7531\u6559\u5e2b\u56de\u8986\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"core-note\">\n <strong style=\"color:var(--primary-dk);\">\u975e\u7a7a\u5927\u5b78\u54e1\u5982\u4f55\u9078\u4fee\u672c\u9580\u8ab2\u7a0b\uff1f<\/strong>\u3000\u5b78\u54e1\u4f9d\u5e33\u865f\u5bc6\u78bc\u9032\u5165\u7a7a\u5927\u6307\u5b9a\u5e73\u53f0\u4fee\u8ab2\u3002<br>\n \u4fee\u8ab2\u6307\u5b9a\u5e73\u53f0\u7db2\u5740\uff1a<a class=\"lnk\" href=\"https:\/\/3tron.nou.edu.tw\/\" target=\"_blank\" rel=\"noopener\">https:\/\/3tron.nou.edu.tw\/<\/a>\n <\/div>\n <\/div>\n <\/section>\n`;\n\nconst FACULTY = [\n { name: \"\u9b4f\u60e0\u5a1f\", initial: \"\u9b4f\", role: \"\u5c08\u4efb\", creditTag: \"2 \u5b78\u5206\", course: \"\u524d\u77bb\u56e0\u61c9\u4eba\u751f 100 \u6838\u5fc3\u8ab2\u7a0b\",\n current: \"\u570b\u7acb\u4e2d\u6b63\u5927\u5b78 \u6559\u6388\",\n edu: \"\u7f8e\u570b\u660e\u5c3c\u8607\u9054\u5927\u5b78 \u6559\u80b2\u653f\u7b56\u8207\u7ba1\u7406\u7814\u7a76\u6240 \u535a\u58eb\",\n expert: \"\u6210\u4eba\u6559\u80b2\u65b9\u6848\u898f\u5283\u8207\u7ba1\u7406\u3001\u6a02\u9f61\u5b78\u7fd2\u3001\u4eba\u751f\u8a2d\u8a08\" },\n { name: \"\u5289\u8389\u7f8e\", initial: \"\u5289\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u98f2\u98df\u3001\u6587\u5b78\u8207\u6587\u5316\uff0f\u820c\u5c16\u4e0a\u7684\u897f\u8a9e\u4e16\u754c\uff1a\u7f8e\u98df\u6558\u4e8b\u8207\u6587\u5316\u5be6\u8e10\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u897f\u8a9e\u7d44 \u526f\u6559\u6388\",\n edu: \"\u897f\u73ed\u7259\u99ac\u5fb7\u91cc Complutense \u5927\u5b78 \u535a\u58eb\",\n expert: \"\u8a9e\u8a00\u6559\u5b78\u3001\u6f22\u5b78\" },\n { name: \"\u9673\u9e97\u5a1f\", initial: \"\u9673\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u6cd5\u570b\u8a9e\u8a00\u8207\u6587\u5316\uff0f\u6cd5\u570b\u65c5\u904a\u8207\u6587\u5316\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u8a9e\u7cfb\u6cd5\u6587\u7d44 \u52a9\u7406\u6559\u6388\",\n edu: \"\u6cd5\u570b\u53f2\u7279\u62c9\u65af\u5821\u5927\u5b78 \u8a9e\u8a00\u79d1\u5b78 \u535a\u58eb\",\n expert: \"\u8de8\u6587\u5316\u6e9d\u901a\u3001\u5c08\u696d\u6cd5\u8a9e\u6559\u5b78\" },\n { name: \"\u912d\u76c8\u76c8\", initial: \"\u912d\", role: \"\u5c08\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u93e1\u50cf\u4fc4\u7f85\u65af\uff1a\u6587\u85dd\u7d93\u5178\u7684\u50b3\u627f\u8207\u905e\u5b17\uff0f\u93e1\u982d\u4e0b\u7684\u4fc4\u7f85\u65af\u6587\u5b78\u793e\u6703\u8207\u5bb6\u5ead\u8b70\u984c\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u6b50\u6d32\u8a9e\u6587\u5b78\u7cfb\u4fc4\u8a9e\u7d44 \u526f\u6559\u6388\",\n edu: \"\u570b\u7acb\u83ab\u65af\u79d1\u7f85\u66fc\u8afe\u7d22\u592b\u5927\u5b78 \u535a\u58eb\",\n expert: \"\u8a9e\u8a00\u6559\u5b78\u3001\u8a9e\u8a00\u5b78\u53ca\u8a9e\u8a00\u6587\u5316\u5b78\" },\n { name: \"\u6797\u9109\u96e8\", initial: \"\u6797\", role: \"\u517c\u4efb\", creditTag: \"4 \u5b78\u5206\", course: \"\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u5f9e\u53e4\u5178\u4e3b\u7fa9\u5230\u6d6a\u6f2b\u4e3b\u7fa9\uff0f\u6b50\u6d32\u97f3\u6a02\u8207\u6587\u5316\uff1a\u6cd5\u897f\u4fc4\u6d6a\u6f2b\u4e3b\u7fa9\u7684\u591a\u5143\u767c\u5c55\",\n current: \"\u6de1\u6c5f\u5927\u5b78 \u570b\u969b\u89c0\u5149\u7ba1\u7406\u5b78\u7cfb \u52a9\u7406\u6559\u6388\uff1b\u570b\u85dd\u6703 2025 \u5e74\u5ea6\u5c08\u6848\u97f3\u6a02\u8a55\u8ad6\u4eba\",\n edu: \"\u570b\u7acb\u81fa\u7063\u5e2b\u7bc4\u5927\u5b78 \u97f3\u6a02\u5b78\u7cfb \u535a\u58eb\",\n expert: \"\u6b50\u6d32\u6b4c\u66f2\u53ca\u6b4c\u5287\u6f14\u5531\u3001\u8a6e\u91cb\u8207\u5206\u6790\u3001\u6f14\u5531\u8207\u7814\u7a76\" },\n];\n\nfunction renderFaculty() {\n return FACULTY.map(f => `\n <article class=\"faculty-card\">\n <div class=\"avatar\">${f.initial}<\/div>\n <div class=\"fac-body\">\n <h3 class=\"fac-name\">${f.name}<\/h3>\n <div class=\"fac-meta\">\n <span class=\"tag role\">${f.role}<\/span>\n <span class=\"tag\">${f.creditTag}<\/span>\n <\/div>\n <p class=\"fac-course\">\u6388\u8ab2\u8ab2\u7a0b\uff1a${f.course}<\/p>\n <ul class=\"fac-info\">\n <li><span class=\"lab\">\u73fe\u8077<\/span><span class=\"txt\">${f.current}<\/span><\/li>\n <li><span class=\"lab\">\u5b78\u6b77<\/span><span class=\"txt\">${f.edu}<\/span><\/li>\n <li><span class=\"lab\">\u5c08\u9577<\/span><span class=\"txt\">${f.expert}<\/span><\/li>\n <\/ul>\n <\/div>\n <\/article>\n `).join('');\n}\n\nconst S9_HTML = `\n <section>\n <div class=\"sec-head\">\n <span class=\"sec-no\">IX.<\/span>\n <h2 class=\"sec-title\">\u5e2b\u8cc7\u9663\u5bb9<small>Faculty<\/small><\/h2>\n <\/div>\n <div class=\"faculty-grid\">\n ${renderFaculty()}\n <\/div>\n <\/section>\n`;\n\nclass EUProgramPage extends HTMLElement {\n connectedCallback() {\n const shadow = this.attachShadow({ mode: 'open' });\n shadow.innerHTML = `\n <style>${PAGE_CSS}<\/style>\n <article class=\"page\" data-screen-label=\"01 \u6b50\u98a8\u6587\u85dd\u5b78\u7a0b\">\n ${A11Y_HTML}\n ${HERO_HTML}\n ${S1_HTML}\n ${S2_HTML}\n ${S3_HTML}\n ${S4_HTML}\n ${S5_HTML}\n ${S6_HTML}\n ${S7_HTML}\n ${S8_HTML}\n ${S9_HTML}\n <\/article>\n `;\n\n const KEY = 'eu-prog-fs';\n let scale = 'md';\n try { scale = localStorage.getItem(KEY) || 'md'; } catch(e) {}\n if (!['md','lg','xl'].includes(scale)) scale = 'md';\n this.setAttribute('data-scale', scale);\n\n const btns = shadow.querySelectorAll('.a11y-btn');\n const sync = () => {\n const cur = this.getAttribute('data-scale');\n btns.forEach(b => b.setAttribute('aria-pressed', b.dataset.set === cur ? 'true' : 'false'));\n };\n sync();\n btns.forEach(b => b.addEventListener('click', () => {\n const v = b.dataset.set;\n this.setAttribute('data-scale', v);\n try { localStorage.setItem(KEY, v); } catch(e) {}\n sync();\n }));\n }\n}\ncustomElements.define('eu-program-page', EUProgramPage);\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u6b50\u98a8\u6587\u85dd\u8207\u8de8\u6587\u5316\u5c0d\u8a71\u5b78\u5206\u5b78\u7a0b<\/p>\n","protected":false},"author":12,"featured_media":0,"parent":7280,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"[]"},"acf":[],"_links":{"self":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735"}],"collection":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7735"}],"version-history":[{"count":19,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735\/revisions"}],"predecessor-version":[{"id":8065,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7735\/revisions\/8065"}],"up":[{"embeddable":true,"href":"\/interacad\/index.php?rest_route=\/wp\/v2\/pages\/7280"}],"wp:attachment":[{"href":"\/interacad\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}