/* =========================================================
   提案成長套件樣式（web05–07 共用）：專案卡、成果收件匣、提案成長圖
   ========================================================= */
/* ---------- 專案卡 ---------- */
.pk-bar { position: sticky; top: calc(var(--dg-header-h) + 12px); z-index: 30; padding: 10px 14px; border-radius: 14px; background: var(--dg-deep); color: #fff; box-shadow: 0 18px 36px -20px rgba(2, 20, 26, .7); margin-bottom: 26px; }
.pk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px 12px; align-items: center; }
.pk-row 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; }
.pk-bar input[type="text"], .pk-bar input[type="url"] { width: 100%; min-width: 0; font: inherit; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(94, 230, 242, .35); background: rgba(255, 255, 255, .06); color: #fff; }
.pk-bar input::placeholder { color: rgba(255, 255, 255, .42); }
.pk-chip { font-family: var(--dg-font-mono); font-size: 11.5px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); white-space: nowrap; }
.pk-chip.on { background: var(--dg-ok); color: #fff; }
.pk-more { appearance: none; cursor: pointer; font: inherit; font-family: var(--dg-font-mono); font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; white-space: nowrap; }
.pk-more:hover, .pk-more[aria-expanded="true"] { background: var(--dg-orange); border-color: var(--dg-orange); }
.pk-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(94, 230, 242, .2); max-height: 60vh; overflow: auto; }
.pk-tip { margin: 0 0 10px; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.7; }
.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pk-f { display: grid; gap: 4px; }
.pk-f span, .pk-kw b, .pk-kwgrid span { font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-teal-glow); }
.pk-kw { margin-top: 12px; }
.pk-kwgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.pk-kwgrid > div { display: grid; gap: 5px; }
.pk-kwgrid input { font-size: 13px !important; padding: 6px 9px !important; }
.pk-acts { margin-top: 12px; display: flex; gap: 8px; }
.pk-acts .dg-btn.line { color: #fff; border-color: rgba(255, 255, 255, .35); }
@media (max-width: 860px) {
  .pk-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pk-row label { grid-column: 1 / -1; }
  .pk-chip { display: none; }
  .pk-grid { grid-template-columns: 1fr; }
  .pk-kwgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 成果收件匣 ---------- */
.pk-res { margin: 18px 0 8px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--dg-teal-strong); background: var(--dg-teal-soft, #E6F6F8); }
.pk-res-h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.pk-res-n { font-family: var(--dg-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #fff; background: var(--dg-teal-strong); border-radius: 6px; padding: 3px 9px; }
.pk-res-h b { font-size: 14.5px; color: var(--dg-ink); }
.pk-res-st { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--dg-ink-faint); }
.pk-res-st.on { color: var(--dg-ok); }
.pk-res textarea { width: 100%; font: inherit; font-size: 14px; line-height: 1.7; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--dg-line-strong); background: #fff; resize: vertical; min-height: 78px; color: var(--dg-ink); }
.pk-res-f { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 8px; }
.pk-res-f input { background: #fff !important; color: var(--dg-ink) !important; border-color: var(--dg-line-strong) !important; }
.pk-res-f small { font-size: 12px; color: var(--dg-ink-faint); }

/* ---------- 提案成長圖 ---------- */
.pk-map { padding: 14px 14px 12px; border-radius: 14px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); }
.pk-map-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.pk-map-h span { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-teal-strong); font-weight: 700; }
.pk-map-bar { height: 6px; border-radius: 99px; background: var(--dg-surface-3); margin: 8px 0 10px; overflow: hidden; }
.pk-map-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--dg-teal), var(--dg-orange)); transition: width .4s; }
.pk-map ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pk-map li a { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 4px; border-radius: 8px; text-decoration: none; color: var(--dg-ink-soft); font-size: 12.5px; line-height: 1.5; }
.pk-map li a:hover { background: var(--dg-surface-2); }
.pk-map li i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--dg-line-strong); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; color: #fff; margin-top: 1px; }
.pk-map li.on i { background: var(--dg-ok); border-color: var(--dg-ok); }
.pk-map li.on a { color: var(--dg-ink); }
.pk-map em { display: block; font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-ink-faint); }
.pk-map.compact li a { font-size: 12px; padding: 3px 4px; }
.pk-map.compact em { display: none; }

/* ---------- 週次路線卡（三週共用） ---------- */
.pk-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.pk-week > div { padding: 14px 16px 12px; border-radius: 14px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); display: grid; gap: 4px; align-content: start; }
.pk-week > div.now { border-color: var(--dg-orange); box-shadow: 0 0 0 3px rgba(232, 98, 42, .15); }
.pk-week .n { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); font-weight: 700; }
.pk-week b { font-size: 15px; }
.pk-week small { font-size: 13px; line-height: 1.7; color: var(--dg-ink-soft); }
.pk-week a { font-size: 12.5px; font-weight: 700; color: var(--dg-teal-strong); text-decoration: none; }
@media (max-width: 760px) { .pk-week { grid-template-columns: 1fr; } }

/* ---------- 步驟標題條（Lv. 區塊內的小節） ---------- */
.pk-meaning { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.pk-meaning > div { padding: 12px 14px; border-radius: 12px; background: var(--dg-surface-2); border: 1px solid var(--dg-line); font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); }
.pk-meaning em { display: block; font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; letter-spacing: .06em; font-weight: 700; color: var(--dg-teal-strong); margin-bottom: 2px; }
@media (max-width: 760px) { .pk-meaning { grid-template-columns: 1fr; } }
.pk-case { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 12px 0; }
.pk-case figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--dg-line); background: #fff; cursor: zoom-in; }
.pk-case img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.pk-case figcaption { padding: 7px 10px; font-size: 12.5px; line-height: 1.55; color: var(--dg-ink-soft); }

/* ---------- 流程卡（pk-route，與 web11 的 w11-route 同款） ---------- */
.pk-route { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; position: relative; }
.pk-route > div { padding: 14px 14px 12px; border-radius: 14px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); display: grid; gap: 4px; align-content: start; position: relative; }
.pk-route > div:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--dg-deep); color: #fff; display: grid; place-items: center; font-size: 11px; z-index: 2; }
.pk-route .n { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); font-weight: 700; }
.pk-route b { font-size: 15px; color: var(--dg-ink); line-height: 1.4; }
.pk-route small { font-size: 12.5px; line-height: 1.6; color: var(--dg-ink-soft); }
.pk-route .who { font-family: var(--dg-font-mono); font-size: 10.5px; padding: 1px 7px; border-radius: 99px; justify-self: start; background: var(--dg-teal-soft); color: var(--dg-teal-strong); }
.pk-route .who.ai { background: var(--dg-orange-soft); color: var(--dg-orange-strong); }
@media (max-width: 980px) { .pk-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pk-route > div::after { display: none; } }
.pk-case figure a { display: block; }
.dg-prompt { margin: 14px 0; }

.pk-map:not(.compact) ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
@media (max-width: 640px) { .pk-map:not(.compact) ol { grid-template-columns: 1fr; } }
.pk-thumbs { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); gap: 8px; margin: 8px 0 14px; }
@media (max-width: 760px) { .pk-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pk-thumbs a { position: relative; display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--dg-line); background: #fff; }
.pk-thumbs img { width: 100%; display: block; }
.pk-thumbs span { position: absolute; left: 4px; top: 4px; font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 700; background: rgba(2, 20, 26, .78); color: #fff; padding: 1px 6px; border-radius: 99px; }
/* Lv.9 自評 */
.pk-cmp { border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 16px 18px; display: grid; gap: 12px; }
.pk-cmp-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; font-size: 13.5px; }
.pk-cmp-r > b { font-size: 14px; } .pk-cmp-r small { display: block; color: var(--dg-ink-faint); font-size: 11.5px; font-weight: 400; }
.pk-cmp-r label { display: grid; gap: 2px; font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-soft); }
.pk-cmp-r input[type=range] { width: 100%; accent-color: var(--dg-orange); }
.pk-cmp-h { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-faint); }
.pk-cmp-tot { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; } .pk-cmp-tot b { font-family: var(--dg-font-mono); font-size: 20px; color: var(--dg-teal-strong); }
.pk-cmp-tot b.ag { color: var(--dg-orange-strong); }
.pk-cmp-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk-cmp-in label { display: grid; gap: 4px; font-size: 12.5px; color: var(--dg-ink-soft); }
.pk-cmp input[type=text] { font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--dg-line-strong); width: 100%; min-width: 0; }
.pk-cmp textarea { width: 100%; font: inherit; font-size: 13.5px; line-height: 1.7; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--dg-line-strong); min-height: 110px; background: #fff; }
@media (max-width: 760px) { .pk-cmp-r, .pk-cmp-h { grid-template-columns: 1fr; } .pk-cmp-h { display: none; } .pk-cmp-in { grid-template-columns: 1fr; } }