/* THE SHARED TABLE — 會議桌場景（desk-v1）。外層由 .bm-journey 改名 .dk-journey，舊桌面程式自然跳過。 */
@font-face{font-family:DKSans;src:url('/directions/desk/desk-sans.woff2?v=desk4') format('woff2');font-display:swap}

/* 外層版面：沿用 .bm-journey 的格線（章節與 sticky 舞台的 class 不變） */
.dk-journey{max-width:1520px;margin:auto;display:grid;grid-template-columns:1fr 1.08fr;gap:5%;padding:0 5%}
.dk-journey .bm-stage{padding-bottom:12px}
.dk-journey,.dk-journey .bm-chapter,.dk-caption,.dk-label,.dk-tip,.dk-title,.dk-tabs button,.dk-journey .bm-stage-note{font-family:ESans,DKSans,sans-serif}

/* 標題列：一句中文說明三個階段（2026-10-03 起不再有「陪跑方式示意」標記膠囊） */
.dk-stage .bm-stage-top{align-items:center;font-size:12px}
.dk-stage .dk-scene-name{font-size:13px;letter-spacing:.04em;font-weight:400;color:var(--accent-strong,#3f6352)}
.dk-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:12px 0 0;font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-.02em;color:#253632}
.dk-badge{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--brand-coral,#c57a5b);border-radius:4px;font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--warn-ink,#9c5034);white-space:nowrap}

/* 畫布 */
.dk-canvas{position:relative;margin-top:10px;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden;border-radius:14px}
.dk-canvas:focus{outline:none}
.dk-canvas:focus-visible{outline:2px solid #547a68;outline-offset:4px}
.dk-journey.is-dragging .dk-canvas{cursor:grabbing}
.dk-frame{position:relative;width:100%;max-width:672px;margin:0 auto;aspect-ratio:640/430;container-type:inline-size;--u:calc(100cqw / 640);--fs:14}
.dk-frame.is-M{aspect-ratio:340/380;--u:calc(100cqw / 340);--fs:12}
.dk-svg{position:absolute;inset:0;width:100%;height:100%;display:block;color:#253632;overflow:visible}
.dk-svg *{pointer-events:none}
.dk-svg [data-k].is-live .dk-hit{pointer-events:all;cursor:pointer}
.dk-svg .dk-hit-line{pointer-events:none}
.dk-svg [data-k].is-live .dk-hit-line{pointer-events:stroke}
.dk-hl{opacity:0;transition:opacity .16s}

/* 文字層：永遠最上層；小螢幕「圖形縮、字不縮」，下限 12px */
.dk-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.dk-label{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));height:calc(18 * var(--u));min-height:18px;padding:0 max(6px,calc(8 * var(--u)));display:flex;align-items:center;white-space:nowrap;font-size:max(12px,calc(var(--fs) * var(--u)));font-weight:400;line-height:1;letter-spacing:-.01em;color:#253632;background:rgba(245,243,237,.94);border-radius:calc(4 * var(--u));transform:translate(calc(var(--ax,.5) * -100%),calc(var(--ay,0) * -100%));pointer-events:none;box-sizing:border-box;transition:background-color .16s,box-shadow .16s}
.dk-label.is-em{background:var(--paper,#f5f3ed)}
.dk-label.is-live{pointer-events:auto;cursor:pointer}
.dk-label.is-on{background:#e8ede5;box-shadow:inset 0 0 0 1px #547a68}
.dk-label:focus{outline:none}
.dk-label:focus-visible{outline:2px solid #547a68;outline-offset:2px}

/* 浮動說明：出現在物件旁，位置由程式挑「不蓋到任何標籤」的那一側 */
.dk-tip{position:absolute;left:0;top:0;z-index:3;max-width:min(240px,62cqw);margin:0;padding:7px 10px;font-size:13px;line-height:1.6;color:#f5f3ed;background:#253632;border-radius:6px;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .16s}
.dk-tip.is-on{opacity:1}

/* 說明列（畫布外，備援） */
.dk-caption{min-height:3.4em;margin:10px 0 0;padding:0 8px;text-align:center;font-size:15px;line-height:1.75;color:#253632;transition:color .16s}
.dk-caption.is-item{color:var(--accent-strong,#3f6352)}
.dk-tabs{margin-top:8px}
.dk-tabs button{font-size:14px}
.dk-tabs button[aria-pressed=true]{color:var(--ink,#253632);font-weight:600;background:color-mix(in srgb,var(--accent,#547a68) 8%,transparent)}
.dk-stage .bm-stage-note,.dk-stage .dk-scrub-label{font-size:12px}
.dk-track{transition:transform .4s cubic-bezier(.215,.61,.355,1)}
.dk-dots{display:none;justify-content:center;gap:4px;margin:4px 0 0}
.dk-dots button{width:44px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.dk-dots button::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid #547a68;box-sizing:border-box;transition:background .16s}
.dk-dots button.is-on::before{background:#547a68}
.dk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 品牌游標：物件上不再顯示「查看說明」浮標（空字串就不畫底框） */
.bm-cursor>span:empty{display:none}

/* 指標：桌面細指標時沿用品牌游標提示 */


@media (max-width:1100px){.dk-journey{gap:3%}}
@media (max-width:760px){
  .dk-journey{display:flex;flex-direction:column;padding:0 23px}
  .dk-title{font-size:16px}
  .dk-canvas{margin-top:8px}
  .dk-scrub-label{display:none!important}
  .dk-dots{display:flex}
  .dk-caption{font-size:14px;min-height:3.6em}
  .dk-tip{font-size:12px}
}
/* 很窄的手機：畫布往左右各借 7px（仍留 16px 邊），讓圖形大一點 */
@media (max-width:380px){.dk-canvas{margin-left:-7px;margin-right:-7px}}
@media (prefers-reduced-motion:reduce){.dk-hl,.dk-label,.dk-dots button::before,.dk-caption,.dk-tip,.dk-track{transition:none}}