/* =========================================================
   web03：資訊架構（IA）互動樣式
   ========================================================= */
.w03-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.w03-pillars > div { padding: 16px 18px; border-radius: 14px; background: var(--dg-surface); border: 1.5px solid var(--dg-line-strong); display: grid; gap: 4px; align-content: start; }
.w03-pillars .k { font-family: var(--dg-font-mono); font-size: 11px; font-weight: 700; color: var(--dg-orange-strong); letter-spacing: .06em; }
.w03-pillars b { font-size: 16px; }
.w03-pillars p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); }
.w03-pillars .q { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; background: var(--dg-teal-soft, #E6F6F8); color: var(--dg-teal-strong); margin-top: 4px; }
@media (max-width: 860px) { .w03-pillars { grid-template-columns: 1fr; } }
.w03-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.w03-line > div { padding: 12px 10px; border-radius: 12px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); font-size: 12.5px; line-height: 1.6; text-align: center; position: relative; }
.w03-line > div.on { background: var(--dg-deep); color: #fff; border-color: var(--dg-deep); }
.w03-line > div b { display: block; font-size: 14px; margin-bottom: 2px; }
.w03-line > div:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--dg-orange); z-index: 2; background: var(--dg-bg, #fff); width: 14px; text-align: center; }
@media (max-width: 860px) { .w03-line { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w03-line > div::after { display: none; } }
.w03-cost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; align-items: end; }
.w03-cost > div { border-radius: 12px; padding: 10px 12px; background: var(--dg-surface-2); border: 1px solid var(--dg-line); font-size: 12.5px; color: var(--dg-ink-soft); display: grid; gap: 2px; }
.w03-cost > div i { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--dg-teal), var(--dg-orange)); margin-bottom: 4px; }
.w03-cost b { font-size: 14px; color: var(--dg-ink); }
@media (max-width: 760px) { .w03-cost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 分類切角 */
.w03-org-pool { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--dg-surface-2); border: 1px dashed var(--dg-line-strong); }
.w03-org-pool span { font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-faint); margin-right: 6px; }
.w03-org-pool i, .w03-org-grid i { font-style: normal; font-size: 12.5px; padding: 3px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--dg-line-strong); }
.w03-org-d { margin: 0 0 10px; font-size: 14px; line-height: 1.75; }
.w03-org-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.w03-org-grid > div { border-radius: 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-height: 110px; background: var(--dg-surface); border: 1.5px solid var(--dg-line-strong); }
.w03-org-grid b { flex: 1 0 100%; font-size: 14px; }
.w03-org-grid b span { font-family: var(--dg-font-mono); font-size: 10.5px; color: #fff; background: var(--dg-teal-strong); border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.w03-org-grid .c1 b span { background: var(--dg-orange-strong); } .w03-org-grid .c2 b span { background: #5B4B8A; } .w03-org-grid .c3 b span { background: #8A6A2E; }
@media (max-width: 860px) { .w03-org-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 卡片分類 */
#cardSort { border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 16px 18px; display: grid; gap: 14px; }
.w03-cs-names { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.w03-cs-names > b, .w03-cs-list > b { grid-column: 1 / -1; font-size: 14px; }
.w03-cs-names label { display: flex; gap: 6px; align-items: center; }
.w03-cs-names label span { width: 22px; height: 22px; border-radius: 50%; background: var(--dg-deep); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 900; flex: none; }
.w03-cs-names input, .w03-sm-in textarea { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--dg-line-strong); width: 100%; min-width: 0; background: #fff; }
.w03-cs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.w03-cs-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--dg-line); }
.w03-cs-row .t { font-size: 14px; font-weight: 700; }
.w03-cs-row .dg-seg button { min-width: 34px; padding: 5px 8px; }
.w03-cs-wait { margin: 0; font-size: 13.5px; color: var(--dg-ink-faint); }
.w03-cs-res p { margin: 8px 0; font-size: 14px; line-height: 1.75; }
.w03-cs-bars > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) 26px; gap: 8px; align-items: center; font-size: 12.5px; margin: 3px 0; }
.w03-cs-bars i { height: 10px; border-radius: 99px; background: var(--dg-teal); display: block; min-width: 2px; } .w03-cs-bars b { text-align: right; font-family: var(--dg-font-mono); }
.w03-cs-diff { margin: 4px 0 8px; padding-left: 18px; font-size: 13.5px; line-height: 1.8; }
.w03-cs-tree { margin: 8px 0; padding: 12px 14px; border-radius: 10px; background: var(--dg-deep); color: #E6FBFD; font-family: var(--dg-font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre; overflow: auto; }
@media (max-width: 760px) { .w03-cs-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w03-cs-list { grid-template-columns: 1fr; } }

/* Figma 檔案結構 */
#figFile { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px; border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 12px; }
.w03-ff-list { display: grid; gap: 6px; align-content: start; }
.w03-ff-list button { appearance: none; font: inherit; cursor: pointer; text-align: left; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--dg-line); background: var(--dg-surface-2); display: grid; }
.w03-ff-list button b { font-family: var(--dg-font-mono); font-size: 13px; } .w03-ff-list button small { font-size: 12px; color: var(--dg-ink-soft); }
.w03-ff-list button[aria-selected="true"] { background: var(--dg-deep); border-color: var(--dg-deep); color: #fff; } .w03-ff-list button[aria-selected="true"] small { color: rgba(255, 255, 255, .75); }
.w03-ff-info { padding: 12px 16px; border-radius: 12px; background: var(--dg-surface-2); } .w03-ff-info h4 { margin: 2px 0 8px; font-size: 18px; font-weight: 900; }
.w03-ff-info p { margin: 6px 0; font-size: 14px; line-height: 1.8; } .w03-ff-info em { display: block; font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-teal-strong); font-weight: 700; }
@media (max-width: 760px) { #figFile { grid-template-columns: 1fr; } }

/* Sitemap 產生器 */
#smBuilder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; border: 1.5px solid var(--dg-line-strong); border-radius: 16px; background: var(--dg-surface); padding: 16px; }
.w03-sm-in, .w03-sm-view, .w03-sm-out { display: grid; gap: 8px; align-content: start; min-width: 0; }
.w03-sm-out { grid-column: 1 / -1; }
.w03-sm-in label small { display: block; font-size: 12.5px; color: var(--dg-ink-soft); }
.w03-sm-in textarea { font-family: var(--dg-font-mono); font-size: 13px; line-height: 1.7; resize: vertical; min-height: 280px; }
.w03-sm-tree { max-height: 300px; overflow: auto; padding: 10px; border-radius: 10px; background: var(--dg-surface-2); display: grid; gap: 4px; }
.w03-sm-tree .n { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.w03-sm-tree .lv { font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 700; color: #fff; border-radius: 5px; padding: 1px 6px; background: var(--dg-deep); }
.w03-sm-tree .d1 .lv { background: var(--dg-teal-strong); } .w03-sm-tree .d2 .lv { background: var(--dg-teal); } .w03-sm-tree .d3 .lv { background: #8A6A2E; } .w03-sm-tree .d4 .lv, .w03-sm-tree .d5 .lv { background: var(--dg-bad); }
.w03-sm-tree em { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 5px; }
.w03-sm-tree em.p0 { background: var(--dg-orange-strong); color: #fff; } .w03-sm-tree em.p1 { border: 1.5px dashed var(--dg-ink-faint); color: var(--dg-ink-soft); }
.w03-sm-chk { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.6; }
.w03-sm-chk li { padding: 4px 10px; border-radius: 7px; } .w03-sm-chk li.ok { background: var(--dg-ok-soft); color: var(--dg-ok); } .w03-sm-chk li.no { background: #FDE8E4; color: var(--dg-bad); }
.w03-sm-note { margin: 6px 0 0; font-size: 13px; color: var(--dg-ink-soft); }
@media (max-width: 860px) { #smBuilder { grid-template-columns: 1fr; } }

/* 任務流程 */
.w03-flow { display: flex; flex-wrap: wrap; gap: 8px 4px; align-items: center; margin: 14px 0 8px; }
.w03-flow .ar { font-size: 18px; color: var(--dg-orange); padding: 0 2px; }
.w03-flow .fn { padding: 10px 14px; text-align: center; font-size: 13.5px; font-weight: 700; display: grid; gap: 2px; max-width: 170px; }
.w03-flow .fn small { font-size: 11.5px; font-weight: 400; color: var(--dg-ink-soft); line-height: 1.5; }
.w03-flow .start, .w03-flow .end { border-radius: 99px; background: var(--dg-deep); color: #fff; } .w03-flow .end { background: var(--dg-ok); }
.w03-flow .page { border-radius: 8px; background: #fff; border: 2px solid var(--dg-teal-strong); }
.w03-flow .dec { background: #FFF3DC; border: 2px solid var(--dg-orange); border-radius: 14px; transform: skewX(-6deg); } .w03-flow .dec > * { transform: skewX(6deg); }
.w03-flow-leg { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--dg-ink-soft); } .w03-flow-leg i { display: inline-block; width: 22px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.w03-flow-leg .t { background: var(--dg-deep); border-radius: 99px; } .w03-flow-leg .p { border: 2px solid var(--dg-teal-strong); border-radius: 3px; } .w03-flow-leg .d { background: #FFF3DC; border: 2px solid var(--dg-orange); border-radius: 4px; transform: skewX(-12deg); }
.w03-flow-note { font-size: 13.5px; margin: 6px 0 0; }