/* =========================================================
   進階網頁設計｜首頁「數位介面風格」（搭配 unit-digital.css 的色彩 Token）
   跟 web01–web05 單元頁同一套視覺語言：深海藍綠＋藍綠＋日落橘、格線底紋、
   Mono 標籤、終端機、可操作的元件；首頁額外加上游標光暈、漂浮 UI 視差、
   工具跑馬燈、課程地圖篩選／時間軸、作業倒數計時。
   ========================================================= */

/* ---------- Hero ---------- */
.page-title.dg-home-hero { padding: calc(var(--dg-header-h) + 56px) 0 0; min-height: min(92vh, 860px); display: flex; flex-direction: column; }
.page-title.dg-home-hero .container { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dg-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(94, 230, 242, .16), transparent 60%); transition: background .1s; }
.dg-home-hero h1 { font-size: clamp(40px, 7vw, 92px) !important; line-height: 1.02 !important; letter-spacing: -.01em !important; margin-bottom: 18px !important; }
.dg-home-hero h1 .en { display: block; font-family: var(--dg-font-display); font-weight: 700; font-size: .38em; letter-spacing: .02em; color: var(--dg-teal-glow); margin-bottom: 10px; }
.dg-rotator { display: inline-flex; align-items: baseline; gap: 8px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; color: #fff; margin-bottom: 18px; min-height: 1.6em; flex-wrap: wrap; }
.dg-rotator .w { color: #FFB38A; border-bottom: 2px solid rgba(255, 179, 138, .5); padding-bottom: 2px; }
.dg-rotator .dg-caret { height: .9em; }
.dg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 26px; max-width: 560px; }
.dg-stats div { border: 1px solid rgba(94, 230, 242, .22); background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 12px 12px 10px; }
.dg-stats b { display: block; font-family: var(--dg-font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1; color: #fff; }
.dg-stats small { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-teal-glow); }
@media (max-width: 520px) { .dg-stats { grid-template-columns: repeat(2, 1fr); } }

/* 漂浮 UI 碎片（滑鼠視差） */
.dg-float-stage { position: relative; min-height: 440px; }
.dg-float-stage .dg-terminal { position: relative; z-index: 2; }
.dg-chip-f { position: absolute; z-index: 3; border-radius: 12px; background: rgba(255, 255, 255, .96); color: var(--dg-ink); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .6); padding: 10px 12px; font-size: 12px; font-weight: 700; transition: transform .25s var(--dg-ease); will-change: transform; animation: dgBob 6s ease-in-out infinite; }
.dg-chip-f small { display: block; font-family: var(--dg-font-mono); font-size: 10px; color: var(--dg-ink-faint); font-weight: 500; }
.dg-chip-f.a { top: -18px; right: -6px; animation-delay: -1s; }
.dg-chip-f.b { bottom: 40px; left: -28px; animation-delay: -3s; display: flex; gap: 8px; align-items: center; }
.dg-chip-f.b i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--dg-teal), var(--dg-orange)); display: inline-block; }
.dg-chip-f.c { bottom: -14px; right: 26px; background: var(--dg-orange); color: #fff; animation-delay: -2s; }
.dg-chip-f.c small { color: rgba(255, 255, 255, .8); }
.dg-chip-f.d { top: 46%; right: -34px; background: #1E1E1E; color: #E6E6E6; font-family: var(--dg-font-mono); font-weight: 500; font-size: 11px; animation-delay: -4s; }
.dg-chip-f.d b { color: #0D99FF; }
@keyframes dgBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .dg-chip-f { animation: none; } }
@media (max-width: 991px) { .dg-float-stage { min-height: 0; margin-top: 10px; } .dg-chip-f.d, .dg-chip-f.b { display: none; } }

/* 工具跑馬燈 */
.dg-marquee { position: relative; z-index: 1; margin-top: 48px; border-top: 1px solid rgba(94, 230, 242, .16); background: rgba(3, 20, 24, .55); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.dg-marquee-track { display: flex; gap: 0; width: max-content; animation: dgMarquee 38s linear infinite; }
.dg-marquee:hover .dg-marquee-track { animation-play-state: paused; }
.dg-marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-family: var(--dg-font-mono); font-size: 13px; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.dg-marquee span::after { content: "✦"; color: var(--dg-orange); margin-left: 26px; font-size: 10px; }
@keyframes dgMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dg-marquee-track { animation: none; } }

/* ---------- 首頁主體 ---------- */
.dg-home { padding-top: 0; }
.dg-home .dg-shell > section { scroll-margin-top: calc(var(--dg-header-h) + 20px); padding: 72px 0 0; }
.dg-home .dg-sec-head { margin-bottom: 22px; }

/* 本週＋繼續閱讀 */
.dg-now { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; margin-top: 32px; position: relative; z-index: 5; }
@media (max-width: 960px) { .dg-now { grid-template-columns: 1fr; margin-top: 24px; } }
.dg-now > div { border-radius: 18px; padding: 20px; box-shadow: 0 24px 50px -30px rgba(6, 30, 34, .55); }
.dg-now .wk { background: linear-gradient(130deg, #0B333B, #07262c); color: #fff; border: 1px solid var(--dg-deep-3); position: relative; overflow: hidden; }
.dg-now .wk::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -110px; background: radial-gradient(circle, rgba(232, 98, 42, .45), transparent 70%); filter: blur(20px); }
.dg-now .wk > * { position: relative; z-index: 1; }
.dg-now .lbl { font-family: var(--dg-font-mono); font-size: 11px; letter-spacing: .1em; display: flex; align-items: center; gap: 8px; }
.dg-now .wk .lbl { color: var(--dg-teal-glow); }
.dg-now .live { width: 8px; height: 8px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 0 rgba(110, 231, 183, .7); animation: dgLive 1.8s infinite; }
@keyframes dgLive { 70% { box-shadow: 0 0 0 10px rgba(110, 231, 183, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 231, 183, 0); } }
.dg-now .wk h3 { color: #fff; font-size: clamp(18px, 2vw, 22px); font-weight: 900; line-height: 1.45; margin: 10px 0 6px; }
.dg-now .wk p { color: rgba(255, 255, 255, .72); font-size: 14px; margin: 0 0 14px; }
.dg-now .wk .bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; margin: 4px 0 14px; }
.dg-now .wk .bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--dg-teal-glow), var(--dg-orange)); width: 0; transition: width 1s var(--dg-ease); }
.dg-now .resume, .dg-now .prog { background: var(--dg-surface); border: 1px solid var(--dg-line); }
.dg-now .resume .lbl, .dg-now .prog .lbl { color: var(--dg-orange-strong); }
.dg-now .resume h4 { font-size: 16.5px; font-weight: 800; line-height: 1.5; margin: 10px 0 4px; }
.dg-now .resume p { font-size: 13px; color: var(--dg-ink-faint); margin: 0 0 12px; }
.dg-now .prog { display: flex; align-items: center; gap: 14px; }
.dg-now .prog .dg-ring { width: 96px; height: 96px; margin: 0; flex: none; }
.dg-now .prog .dg-ring .val { font-size: 22px; }
.dg-now .prog b { display: block; font-size: 15px; font-weight: 800; }
.dg-now .prog small { display: block; font-size: 12.5px; color: var(--dg-ink-faint); line-height: 1.5; }

/* 課程簡介：三大模組 */
.dg-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 960px) { .dg-intro { grid-template-columns: 1fr; } }
.dg-intro .lede { font-size: 17px; line-height: 1.95; color: var(--dg-ink-soft); }
.dg-intro .lede strong { color: var(--dg-ink); }
.dg-mods { display: grid; gap: 10px; }
.dg-mod { appearance: none; cursor: pointer; text-align: left; font: inherit; color: inherit; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); box-shadow: var(--dg-shadow); transition: all .25s var(--dg-ease); }
.dg-mod .n { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-family: var(--dg-font-display); font-weight: 700; font-size: 20px; background: var(--dg-surface-2); color: var(--dg-teal-strong); transition: all .25s; }
.dg-mod b { display: block; font-size: 17px; font-weight: 900; line-height: 1.4; }
.dg-mod small { display: block; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-faint); }
.dg-mod p { grid-column: 2 / -1; margin: 0; font-size: 14.5px; line-height: 1.75; max-height: 0; overflow: hidden; opacity: 0; transition: all .35s var(--dg-ease); }
.dg-mod .ar { color: var(--dg-ink-faint); transition: transform .25s; }
.dg-mod:hover { border-color: var(--dg-teal); }
.dg-mod[aria-expanded="true"] { border-color: var(--dg-orange); background: linear-gradient(120deg, var(--dg-orange-soft), var(--dg-surface) 60%); }
.dg-mod[aria-expanded="true"] .n { background: var(--dg-orange); color: #fff; }
.dg-mod[aria-expanded="true"] p { max-height: 260px; opacity: 1; margin-top: 4px; }
.dg-mod[aria-expanded="true"] .ar { transform: rotate(90deg); color: var(--dg-orange); }

/* 課程地圖 */
.dg-map-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; }
.dg-map-ctrl .dg-search { margin-left: 0; max-width: 260px; }
.dg-map-ctrl .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.dg-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dg-unit { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--dg-surface); border: 1px solid var(--dg-line); box-shadow: var(--dg-shadow); text-decoration: none; color: inherit; transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .3s, border-color .3s; will-change: transform; }
.dg-unit:hover { border-color: var(--dg-teal); box-shadow: 0 30px 50px -30px rgba(6, 30, 34, .55); color: inherit; }
.dg-unit .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dg-surface-3); }
.dg-unit .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--dg-ease); }
.dg-unit:hover .ph img { transform: scale(1.07); }
.dg-unit .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 38, 44, .75)); }
.dg-unit .no { position: absolute; left: 14px; bottom: 10px; z-index: 1; font-family: var(--dg-font-display); font-weight: 700; font-size: 34px; line-height: 1; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.dg-unit .badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.dg-unit .badges span { font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--dg-ink); }
.dg-unit .badges .now { background: var(--dg-orange); color: #fff; animation: dgNowPulse 2s infinite; }
.dg-unit .badges .seen { background: var(--dg-teal-strong); color: #fff; }
.dg-unit .badges .new { background: var(--dg-deep); color: var(--dg-teal-glow); margin-left: auto; }
@keyframes dgNowPulse { 50% { box-shadow: 0 0 0 5px rgba(232, 98, 42, .25); } }
.dg-unit .bd { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dg-unit .meta { display: flex; gap: 8px; flex-wrap: wrap; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-faint); }
.dg-unit .meta .ph-tag { color: var(--dg-teal-strong); }
.dg-unit h3 { font-size: 16px; font-weight: 800; line-height: 1.5; color: var(--dg-ink); }
.dg-unit p { font-size: 13.5px; line-height: 1.6; margin: 0; }
.dg-unit .go { margin-top: auto; padding-top: 8px; font-family: var(--dg-font-mono); font-size: 12px; font-weight: 600; color: var(--dg-orange-strong); display: inline-flex; gap: 6px; align-items: center; transition: gap .2s; }
.dg-unit:hover .go { gap: 12px; }
.dg-unit.is-now { border-color: var(--dg-orange); box-shadow: 0 0 0 3px rgba(232, 98, 42, .15), var(--dg-shadow); }
.dg-unit[hidden] { display: none; }

/* 時間軸檢視 */
.dg-units.timeline { grid-template-columns: 1fr; gap: 0; position: relative; padding-left: 34px; }
.dg-units.timeline::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: repeating-linear-gradient(180deg, var(--dg-line-strong) 0 6px, transparent 6px 12px); }
.dg-units.timeline .dg-unit { flex-direction: row; align-items: stretch; margin-bottom: 12px; border-radius: 14px; }
.dg-units.timeline .dg-unit::before { content: ""; position: absolute; left: -28px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--dg-surface); border: 2px solid var(--dg-teal); }
.dg-units.timeline .dg-unit.is-now::before { background: var(--dg-orange); border-color: var(--dg-orange); box-shadow: 0 0 0 5px rgba(232, 98, 42, .2); }
.dg-units.timeline .dg-unit .ph { aspect-ratio: auto; width: 180px; flex: none; }
.dg-units.timeline .dg-unit .no { font-size: 26px; }
.dg-units.timeline .dg-unit .badges { right: auto; }
.dg-units.timeline .dg-unit .badges .new { display: none; }
@media (max-width: 620px) { .dg-units.timeline .dg-unit .ph { width: 104px; } .dg-units.timeline .dg-unit p { display: none; } }
.dg-phase-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; }
.dg-phase-head:first-child { margin-top: 0; }
.dg-phase-head b { font-size: 15px; font-weight: 900; }
.dg-phase-head span { font-family: var(--dg-font-mono); font-size: 11px; color: #fff; background: var(--dg-deep); border-radius: 6px; padding: 3px 9px; }
.dg-phase-head i { flex: 1; height: 1px; background: var(--dg-line-strong); }
.dg-units.timeline .dg-phase-head { margin-left: -34px; }

/* 資源卡（反白區） */
.dg-res { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid rgba(94, 230, 242, .22); background: rgba(255, 255, 255, .05); text-decoration: none; color: #fff; transition: all .25s var(--dg-ease); height: 100%; }
.dg-res:hover { border-color: var(--dg-teal-glow); background: rgba(94, 230, 242, .08); transform: translateY(-4px); color: #fff; }
.dg-res .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(94, 230, 242, .14); color: var(--dg-teal-glow); }
.dg-res b { font-size: 17px; font-weight: 900; }
.dg-res p { font-size: 14px; line-height: 1.7; margin: 0; color: rgba(255, 255, 255, .72); }
.dg-res .go { margin-top: auto; font-family: var(--dg-font-mono); font-size: 12px; color: #FFB38A; }
.dg-res img { border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; opacity: .9; }

/* 作業倒數 */
.dg-hw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .dg-hw { grid-template-columns: 1fr; } }
.dg-hw-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 22px; border-radius: 18px; border: 1px solid var(--dg-line); background: var(--dg-surface); box-shadow: var(--dg-shadow); overflow: hidden; }
.dg-hw-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(14, 165, 184, .14), transparent 70%); }
.dg-hw-card.final::after { background: radial-gradient(circle, rgba(232, 98, 42, .16), transparent 70%); }
.dg-cal { border-radius: 14px; overflow: hidden; text-align: center; border: 1px solid var(--dg-line); background: #fff; align-self: start; }
.dg-cal .m { background: var(--dg-teal-strong); color: #fff; font-family: var(--dg-font-mono); font-size: 11px; padding: 5px 0; letter-spacing: .08em; }
.dg-hw-card.final .dg-cal .m { background: var(--dg-orange); }
.dg-cal .d { font-family: var(--dg-font-display); font-size: 40px; font-weight: 700; line-height: 1.1; padding: 6px 0 0; color: var(--dg-ink); }
.dg-cal .y { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-faint); padding-bottom: 8px; }
.dg-hw-card .tag { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-teal-strong); }
.dg-hw-card.final .tag { color: var(--dg-orange-strong); }
.dg-hw-card h3 { font-size: 20px; font-weight: 900; margin: 4px 0 4px; }
.dg-hw-card p { font-size: 14px; margin: 0 0 10px; }
.dg-count4 { display: flex; gap: 6px; margin-bottom: 14px; }
.dg-count4 div { flex: 1; text-align: center; border-radius: 10px; background: var(--dg-deep); color: #fff; padding: 8px 4px 6px; }
.dg-count4 b { display: block; font-family: var(--dg-font-display); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.dg-count4 small { font-family: var(--dg-font-mono); font-size: 10px; color: var(--dg-teal-glow); }
.dg-hw-card .acts { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }

/* 結尾 CTA */
.dg-endcta { margin: 72px 0 0; border-radius: 22px; padding: clamp(26px, 5vw, 48px); background: var(--dg-deep); color: #fff; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.dg-endcta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 90% 10%, rgba(232, 98, 42, .35), transparent 40%), linear-gradient(rgba(94, 230, 242, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 230, 242, .06) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; pointer-events: none; }
.dg-endcta > * { position: relative; }
.dg-endcta h2 { color: #fff !important; font-size: clamp(22px, 3vw, 32px); font-weight: 900; line-height: 1.35; margin: 6px 0 8px; }
.dg-endcta p { color: rgba(255, 255, 255, .75); margin: 0; }
.dg-endcta .acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .dg-endcta { grid-template-columns: 1fr; } }
.dg-map-ctrl .dg-seg { flex-wrap: nowrap; flex: none; }
.dg-map-ctrl .dg-seg button { padding: 8px 12px; font-size: 16px; }
@media (max-width: 760px) { .dg-map-ctrl .right { margin-left: 0; width: 100%; } .dg-map-ctrl .dg-search { flex: 1; max-width: none; } }

/* ---------- 學期專題路線：期中提案 → 期末上線（首頁＋作業區共用） ---------- */
.dg-path { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; gap: 0; }
@media (max-width: 860px) { .dg-path { grid-template-columns: 1fr; } }
.dg-path-card { position: relative; border-radius: 20px; padding: 24px 22px 20px; background: var(--dg-surface); border: 1px solid var(--dg-line); box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.dg-path-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--dg-teal); }
.dg-path-card.final::before { background: var(--dg-orange); }
.dg-path-card .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dg-path-card .when { font-family: var(--dg-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #fff; background: var(--dg-teal-strong); border-radius: 6px; padding: 3px 9px; }
.dg-path-card.final .when { background: var(--dg-orange-strong); }
.dg-path-card .date { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); }
.dg-path-card h3 { font-size: clamp(19px, 2vw, 23px); font-weight: 900; line-height: 1.4; margin: 0; }
.dg-path-card .q { font-size: 14.5px; line-height: 1.75; color: var(--dg-ink-soft); margin: 0; }
.dg-path-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dg-path-card li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14.5px; line-height: 1.6; }
.dg-path-card li i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--dg-teal-soft); color: var(--dg-teal-strong); }
.dg-path-card.final li i { background: var(--dg-orange-soft); color: var(--dg-orange-strong); }
.dg-path-card li small { display: block; color: var(--dg-ink-faint); font-size: 12.5px; }
.dg-path-card .tools { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--dg-line-strong); }
.dg-path-card .tools span { font-family: var(--dg-font-mono); font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--dg-surface-2); color: var(--dg-ink-soft); }
.dg-path-card .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.dg-path-arrow { display: grid; place-items: center; color: var(--dg-orange); font-size: 26px; }
.dg-path-arrow span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--dg-surface); border: 1px solid var(--dg-line-strong); box-shadow: var(--dg-shadow); }
@media (max-width: 860px) { .dg-path-arrow { padding: 8px 0; } .dg-path-arrow i { transform: rotate(90deg); } }
.dg-path-note { margin-top: 14px; font-size: 14px; color: var(--dg-ink-soft); display: flex; gap: 8px; align-items: flex-start; }
.dg-path-note i { color: var(--dg-orange); margin-top: 3px; }

/* 課程地圖：延伸講義（選讀）卡片 */
.dg-unit.is-ref { opacity: .82; }
.dg-unit.is-ref .ph img { filter: grayscale(.6); }
.dg-unit.is-ref:hover { opacity: 1; }
.dg-unit .badges .ref { background: var(--dg-surface-3); color: var(--dg-ink-soft); }
.dg-unit .badges .key { background: var(--dg-orange); color: #fff; }

/* ---------- 作業區：範例縮圖牆、路線卡、週次表 ---------- */
.dg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.dg-thumbs.wide { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.dg-thumbs a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--dg-line); background: var(--dg-surface-2); transition: transform .2s var(--dg-ease), border-color .2s; }
.dg-thumbs a:hover { transform: translateY(-3px); border-color: var(--dg-teal); }
.dg-thumbs img { display: block; width: 100%; height: auto; }
.dg-thumbs figcaption, .dg-thumbs small { display: block; font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-ink-faint); padding: 5px 7px; }
.dg-route { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.dg-route .r { font-family: var(--dg-font-mono); font-size: 11px; font-weight: 700; color: var(--dg-teal-strong); letter-spacing: .06em; }
.dg-route h4 { font-size: 17px; font-weight: 900; margin: 0; }
.dg-route p { font-size: 14px; margin: 0; }
.dg-route ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; }
.dg-route.rec { border-color: var(--dg-orange); box-shadow: 0 0 0 3px rgba(232, 98, 42, .12), var(--dg-shadow); }
.dg-route.rec .r { color: var(--dg-orange-strong); }
.dg-week td:first-child { white-space: nowrap; font-family: var(--dg-font-mono); font-weight: 700; color: var(--dg-teal-strong); }
.dg-week tr.mile td { background: var(--dg-orange-soft); }
.dg-week tr.mile td:first-child { color: var(--dg-orange-strong); }
.dg-week tr.phase td { background: var(--dg-deep); color: #fff; font-family: var(--dg-font-mono); font-size: 12px; letter-spacing: .06em; padding-top: 8px; padding-bottom: 8px; }
.dg-week tr.phase td:first-child { color: var(--dg-teal-glow); }
.dg-week tr.is-now td { box-shadow: inset 3px 0 0 var(--dg-orange); }
.dg-week tr.is-now td:first-child::after { content: " ● 本週"; color: var(--dg-orange); font-size: 10.5px; }