/* =========================================================
   web07：期中報告（接在 unit-digital.css、proposal-studio.css 之後）
   ========================================================= */
.w07-mini { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); }
.w07-bar { position: sticky; top: calc(var(--dg-header-h) + 12px); z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--dg-deep); color: #fff; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .55); margin: 6px 0 22px; }
.w07-bar label { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-teal-glow); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.w07-bar input { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(94, 230, 242, .35); background: rgba(255, 255, 255, .06); color: #fff; }
.w07-bar input::placeholder { color: rgba(255, 255, 255, .45); }
@media (max-width: 760px) { .w07-bar { grid-template-columns: 1fr; position: static; } }

/* 交付物卡 */
.w07-deliv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .w07-deliv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .w07-deliv { grid-template-columns: 1fr; } }
.w07-dl { border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 16px 16px 14px; display: grid; gap: 6px; align-content: start; position: relative; }
.w07-dl.must { border-top: 5px solid var(--dg-orange); }
.w07-dl.bonus { border-top: 5px solid var(--dg-teal); background: var(--dg-teal-soft); }
.w07-dl .tg { font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 9px; border-radius: 99px; justify-self: start; color: #fff; background: var(--dg-orange); }
.w07-dl.bonus .tg { background: var(--dg-teal-strong); }
.w07-dl h4 { margin: 2px 0 0; font-size: 18px; font-weight: 900; }
.w07-dl ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); }
.w07-dl .fm { font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-faint); }
.w07-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
@media (max-width: 760px) { .w07-specs { grid-template-columns: 1fr; } }
.w07-specs > div { padding: 12px 16px; border-radius: 12px; background: var(--dg-deep); color: #fff; display: grid; gap: 2px; }
.w07-specs small { font-family: var(--dg-font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--dg-teal-glow); }
.w07-specs b { font-size: 17px; }
.w07-specs span { font-size: 12.5px; color: rgba(255, 255, 255, .75); }

/* 範例解剖 */
.w07-ex-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.w07-ex-hint { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); }
.w07-ex { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .w07-ex { grid-template-columns: 1fr; } }
.w07-ex-list { display: grid; gap: 4px; max-height: 640px; overflow: auto; padding-right: 4px; }
@media (max-width: 900px) { .w07-ex-list { max-height: 240px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w07-ex-list button { appearance: none; text-align: left; font: inherit; cursor: pointer; display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: center; padding: 7px 10px; border-radius: 9px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); font-size: 13px; font-weight: 700; color: var(--dg-ink); transition: all .15s; }
.w07-ex-list button .n { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-faint); }
.w07-ex-list button em { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-ink-faint); }
.w07-ex-list button[aria-selected="true"] { border-color: var(--dg-orange); background: var(--dg-orange-soft); }
.w07-ex-list .mk { font-style: normal; font-family: var(--dg-font-mono); font-size: 10px; padding: 1px 6px; border-radius: 99px; color: #fff; }
.mk.must { background: var(--dg-orange); } .mk.rec { background: var(--dg-teal-strong); } .mk.opt { background: #94A3B8; }
.w07-flow { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--dg-surface-2); font-size: 12px; line-height: 1.7; color: var(--dg-ink-soft); display: grid; gap: 1px; }
.w07-flow b { font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-teal-strong); letter-spacing: .08em; }
.w07-ex-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; align-items: start; border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 14px; }
@media (max-width: 760px) { .w07-ex-view { grid-template-columns: 1fr; } }
.w07-ex-view figure { margin: 0; }
.w07-ex-view .zoom { appearance: none; border: 0; padding: 0; background: #E9ECEF; border-radius: 10px; overflow: hidden; cursor: zoom-in; display: block; width: 100%; }
.w07-ex-view img { width: 100%; max-height: 520px; object-fit: contain; object-position: top; display: block; background: #fff; }
.w07-ex-view figcaption { font-size: 11.5px; color: var(--dg-ink-faint); margin-top: 6px; text-align: center; }
.w07-ex-view .info h4 { margin: 8px 0 8px; font-size: 20px; font-weight: 900; }
.w07-ex-view .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.w07-ex-view .tags i { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; padding: 2px 9px; border-radius: 99px; background: var(--dg-surface-3); color: var(--dg-ink-soft); }
.w07-ex-view .tags i.sc { color: #fff; }
.w07-ex-view .info p, .w07-ex-view .info .gd, .w07-ex-view .info .up, .w07-ex-view .info .mp { font-size: 14px; line-height: 1.75; color: var(--dg-ink-soft); margin: 0 0 8px; }
.w07-ex-view .info p b, .w07-ex-view .info div b { display: block; font-family: var(--dg-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--dg-teal-strong); }
.w07-ex-view .info .pit b, .w07-ex-view .info .up b { color: var(--dg-bad); }
.w07-ex-view .info .gd { background: var(--dg-ok-soft); border-radius: 10px; padding: 8px 12px; }
.w07-ex-view .info .gd b { color: var(--dg-ok); }
.w07-ex-view .info .up { background: var(--dg-orange-soft); border-radius: 10px; padding: 8px 12px; }
.w07-ex-view .info .mp { background: var(--dg-teal-soft); border-radius: 10px; padding: 8px 12px; }
.w07-ex-view .nv { display: flex; gap: 8px; margin-top: 10px; }
.w07-ex-view .nv button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--dg-line-strong); background: #fff; cursor: pointer; color: var(--dg-ink); }
.w07-ex-view .nv button:hover { border-color: var(--dg-orange); color: var(--dg-orange-strong); }

/* 倒推時程 */
.w07-cd-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.w07-cd-top label { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-soft); }
.w07-cd-top input { font: inherit; padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--dg-line-strong); }
.w07-cd-list { display: grid; gap: 6px; }
.w07-cd { display: grid; grid-template-columns: 22px 108px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); cursor: pointer; transition: all .2s; }
@media (max-width: 700px) { .w07-cd { grid-template-columns: 22px 1fr; } .w07-cd .who { grid-column: 2; } }
.w07-cd input { margin-top: 3px; accent-color: var(--dg-ok); width: 17px; height: 17px; }
.w07-cd .dt { display: grid; gap: 1px; }
.w07-cd .dt b { font-size: 14px; color: var(--dg-ink); }
.w07-cd .dt em { font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); font-weight: 700; }
.w07-cd .tx b { font-size: 14.5px; color: var(--dg-ink); display: block; }
.w07-cd .tx small { font-size: 12.5px; line-height: 1.65; color: var(--dg-ink-soft); }
.w07-cd .who { font-family: var(--dg-font-mono); font-size: 10.5px; padding: 2px 9px; border-radius: 99px; background: var(--dg-teal-soft); color: var(--dg-teal-strong); white-space: nowrap; }
.w07-cd.on { background: var(--dg-ok-soft); border-color: #B7E3D0; }
.w07-cd.late { border-color: var(--dg-bad); background: var(--dg-orange-soft); }

/* 評分自評 */
.w07-rb-sum { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; border-radius: 16px; background: var(--dg-deep); color: #fff; margin-bottom: 14px; }
@media (max-width: 640px) { .w07-rb-sum { grid-template-columns: 1fr; } }
.w07-rb-sum .ring { width: 130px; height: 130px; border-radius: 50%; border: 8px solid var(--dg-orange); display: grid; place-content: center; text-align: center; justify-self: center; }
.w07-rb-sum .ring b { font-family: var(--dg-font-display); font-size: 44px; line-height: 1; }
.w07-rb-sum .ring span { font-family: var(--dg-font-mono); font-size: 11px; color: rgba(255, 255, 255, .6); }
.w07-rb-sum .bars { display: grid; gap: 6px; }
.w07-rb-sum .bars > div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 58px; gap: 8px; align-items: center; font-size: 12.5px; }
.w07-rb-sum .bars i { height: 9px; background: rgba(255, 255, 255, .15); border-radius: 5px; overflow: hidden; display: block; }
.w07-rb-sum .bars u { display: block; height: 100%; border-radius: 5px; transition: width .4s; }
.w07-rb-sum .bars b { font-family: var(--dg-font-mono); font-size: 11.5px; text-align: right; }
@media (max-width: 640px) { .w07-rb-sum .bars > div { grid-template-columns: 110px 1fr 54px; } }
.w07-weak { margin: 6px 0 0; font-size: 13px; color: #FFD3BD; }
.w07-weak b { color: #fff; }
.w07-rb-list { display: grid; gap: 10px; }
.w07-rb { border: 1.5px solid var(--dg-line); border-radius: 14px; background: var(--dg-surface); padding: 12px 14px; display: grid; gap: 8px; }
.w07-rb .hd { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.w07-rb .hd .k { width: 28px; height: 28px; border-radius: 8px; background: var(--dg-orange); color: #fff; display: grid; place-items: center; font-family: var(--dg-font-mono); font-weight: 700; }
.w07-rb .hd b { font-size: 16px; display: block; }
.w07-rb .hd small { font-size: 12.5px; color: var(--dg-ink-soft); line-height: 1.55; display: block; }
.w07-rb .hd em { font-style: normal; font-family: var(--dg-font-display); font-weight: 700; font-size: 20px; color: var(--dg-orange-strong); }
.w07-rb .ds { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--dg-ink-soft); background: var(--dg-surface-2); border-radius: 10px; padding: 8px 12px; }
.w07-rb .ds b { color: var(--dg-ink); }
.w07-bonus { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 6px; padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--dg-teal); background: var(--dg-teal-soft); cursor: pointer; }
.w07-bonus input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--dg-teal-strong); }
.w07-bonus b { display: block; font-size: 14px; }
.w07-bonus small { font-size: 12.5px; color: var(--dg-ink-soft); }

/* 工作台預覽 */
.w07-doc .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.w07-doc .pg { aspect-ratio: 794 / 1123; background: #fff; border: 1px solid #D5D9DD; border-top: 5px solid var(--c); border-radius: 4px; padding: 6px; display: grid; align-content: space-between; position: relative; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .3); }
.w07-doc .pg i { font-style: normal; font-family: var(--dg-font-mono); font-size: 10px; color: #94A3B8; }
.w07-doc .pg b { font-size: 11px; line-height: 1.3; color: #0B2A30; }
.w07-doc .bar { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.w07-doc .leg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.w07-doc .leg span { font-size: 11px; padding: 2px 9px; border-radius: 99px; color: #fff; background: var(--c); }
.w07-deck .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.w07-deck .sl { aspect-ratio: 16 / 9; background: #fff; border: 1px solid #D5D9DD; border-radius: 6px; padding: 6px 8px; display: grid; align-content: space-between; position: relative; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .3); }
.w07-deck .sl.long { border-color: var(--dg-amber); background: #FFF9EE; }
.w07-deck .sl i { font-style: normal; font-family: var(--dg-font-mono); font-size: 10px; color: #94A3B8; }
.w07-deck .sl b { font-size: 11.5px; line-height: 1.3; color: #0B2A30; }
.w07-deck .sl em { font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); font-weight: 700; justify-self: end; }
.w07-deck .tl { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 12px; gap: 2px; }
.w07-deck .tl u { background: var(--c); display: block; }
.w07-deck .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.w07-qa .qs { display: grid; gap: 8px; }
.w07-qa .q { background: #fff; border-radius: 12px; padding: 10px 14px; border-left: 4px solid var(--dg-orange); display: grid; gap: 2px; }
.w07-qa .q small { font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-orange-strong); letter-spacing: .06em; }
.w07-qa .q b { font-size: 14px; color: #0B2A30; }
.w07-qa .q span { font-size: 12.5px; color: #64748B; }
.w07-qa .ans { margin-top: 10px; background: var(--dg-deep); color: #fff; border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.w07-qa .ans > b { font-size: 13px; color: var(--dg-teal-glow); }
.w07-qa .ans > div { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.w07-qa .ans i { width: 22px; height: 22px; border-radius: 50%; background: var(--dg-orange); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; }
.w07-qa .ans span { font-size: 13.5px; font-weight: 700; }
.w07-qa .ans small { display: block; font-weight: 400; font-size: 12px; color: rgba(255, 255, 255, .7); }
.w07-qa .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }