/* =========================================================
   digi05.html「No-Code 網頁設計實務 × 免費 AI 建站」專用樣式
   版型參考 ui04「關卡式」講義：先講定義 → 動手操作 → 立刻看到結果。
   案例主線：《菇》毒蘑菇教育專題的線上策展網頁。
   主色：陶土橘（呼應 Claude）＋ 深墨綠。只在 .d5-page 之下擴充，不影響 main.css。
   ========================================================= */
.d5-page {
	--d-ink: #1F1E1B;
	--d-ink-2: #4E4B45;
	--d-ink-3: #8A857C;
	--d-paper: #ffffff;
	--d-bg: #FAF7F2;
	--d-line: #ECE4D8;
	--d-brand: #C96442;        /* Claude 陶土橘：結構性主色 */
	--d-brand-strong: #9E4A2E;
	--d-brand-soft: #F8E7DE;
	--d-forest: #2F5D50;       /* 深墨綠：輔色（部署、檢核） */
	--d-forest-soft: #E3EFEA;
	--d-gem: #3D6FE0;          /* Gemini 識別色 */
	--d-gem-soft: #E6EDFC;
	--d-warn: #D9480F;
	--d-good: #2B8A5E;
	--d-dot: #EADFCF;
	--d-brand-grad: linear-gradient(135deg, #D97757 0%, var(--d-brand-strong) 100%);
	--d-forest-grad: linear-gradient(135deg, #3E7A69 0%, var(--d-forest) 100%);
	--d-ink-grad: linear-gradient(135deg, #2B2925 0%, #141311 100%);
	--d-glass: linear-gradient(165deg, rgba(255,255,255,.82) 0%, rgba(248,231,222,.55) 100%);
	--d-font-display: "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
	--d-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--d-ease: cubic-bezier(.16,.84,.44,1);
	--r: 18px;
	--hdr: 84px;
	background-color: var(--d-bg);
	background-image: radial-gradient(var(--d-dot) 1px, transparent 1.2px);
	background-size: 22px 22px;
	color: var(--d-ink);
	font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	font-size: 16px;
	line-height: 1.75;
	padding-bottom: 100px;
	overflow-x: clip;
}
.d5-page *, .d5-page *::before, .d5-page *::after { box-sizing: border-box; }
.d5-page h2, .d5-page h3, .d5-page h4, .d5-page h5 { font-family: var(--d-font-display); color: var(--d-ink); }
.d5-page img { max-width: 100%; display: block; }
.d5-page a { text-decoration: none; }
.d5-page p { font-size: 16px; line-height: 1.8; color: var(--d-ink-2); }
.d5-page code { font-family: var(--d-font-mono); font-size: .88em; background: var(--d-brand-soft); color: var(--d-brand-strong); padding: 1px 6px; border-radius: 5px; }
.d5-page kbd { font-family: var(--d-font-mono); font-size: .82em; background: #fff; border: 1px solid var(--d-line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--d-ink); }
.d5-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.d5-mono { font-family: var(--d-font-mono); letter-spacing: .13em; text-transform: uppercase; font-size: 12px; font-weight: 700; }

/* ---------- 頁內選單 ---------- */
.d5-subnav { position: sticky; top: var(--hdr); z-index: 90; background: rgba(250,247,242,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--d-line); }
.d5-subnav .d5-wrap { display: flex; gap: 2px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 6px; }
.d5-subnav .d5-wrap::-webkit-scrollbar { display: none; }
.d5-subnav a { position: relative; flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px; padding: 14px 13px 12px; color: var(--d-ink-3); white-space: nowrap; font-size: 13.5px; font-weight: 700; transition: color .2s; }
.d5-subnav a .no { font: 900 12px/1 var(--d-font-mono); opacity: .55; }
.d5-subnav a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--d-brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--d-ease); }
.d5-subnav a:hover, .d5-subnav a.is-on { color: var(--d-ink); }
.d5-subnav a.is-on .no { opacity: 1; color: var(--d-brand-strong); }
.d5-subnav a.is-on::after { transform: scaleX(1); }
.d5-page section[id] { scroll-margin-top: calc(var(--hdr) + 64px); }
/* main.css 對所有 section 加了 #f1f5f4 底色，本頁改為透明，統一透出 .d5-page 的底 */
.d5-page section { background: transparent; }

/* ---------- 開場 ---------- */
.d5-intro { position: relative; padding: 56px 0 36px; display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: 44px; align-items: start; }
.d5-intro::before { content: ""; position: absolute; z-index: 0; width: 320px; height: 320px; top: -130px; right: -40px; border-radius: 50%; background: var(--d-brand); opacity: .22; filter: blur(70px); pointer-events: none; }
.d5-intro > * { position: relative; z-index: 1; }
.d5-intro .d5-mono { color: var(--d-brand-strong); display: flex; align-items: center; gap: 10px; }
.d5-intro .d5-mono::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.d5-intro h2 { font-size: clamp(28px,4vw,46px); line-height: 1.18; font-weight: 900; margin: 16px 0 0; }
.d5-intro h2 em { font-style: normal; background: linear-gradient(transparent 62%, var(--d-brand-soft) 62%); color: var(--d-brand-strong); padding: 0 .06em; }
.d5-strap { margin: 14px 0 0; font-size: 16.5px; font-weight: 800; color: var(--d-ink); }
.d5-strap .s1 { color: var(--d-brand-strong); }
.d5-strap .s2 { color: var(--d-forest); }
.d5-intro p.lead { font-size: 16.5px; line-height: 1.85; margin: 18px 0 0; max-width: 44em; }
.d5-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 2px solid var(--d-ink); margin-top: 26px; }
.d5-stats div { padding: 14px 10px 0 0; }
.d5-stats .stat-number { display: block; font-size: clamp(30px,3.6vw,42px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: var(--d-ink); }
.d5-stats .lbl { display: block; margin-top: 6px; font-size: 12.5px; color: var(--d-ink-2); line-height: 1.5; }
.d5-updated { margin-top: 18px; font-size: 11.5px !important; color: var(--d-ink-3) !important; }

.case-chip { display: flex; align-items: center; gap: 14px; background: var(--d-glass); border: 1px solid var(--d-line); border-radius: var(--r); padding: 16px 18px; box-shadow: 0 18px 40px -30px rgba(158,74,46,.5); }
.case-chip .mark { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; background: var(--d-ink-grad); color: #fff; display: grid; place-items: center; font: 900 24px/1 var(--d-font-display); }
.case-chip b { display: block; font-size: 16px; color: var(--d-ink); }
.case-chip span { display: block; font-size: 13px; color: var(--d-ink-2); line-height: 1.55; }
.stage-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.stage-pills a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); background: #fff; border: 1px solid var(--d-line); border-radius: 999px; padding: 5px 11px 5px 6px; transition: border-color .2s, color .2s, transform .2s; }
.stage-pills a b { font: 800 10.5px/1 var(--d-font-mono); background: var(--d-brand-soft); color: var(--d-brand-strong); border-radius: 999px; padding: 4px 6px; }
.stage-pills a:hover { border-color: var(--d-brand); color: var(--d-brand-strong); transform: translateY(-1px); }

.d5-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.d5-note { font-size: 14.5px; line-height: 1.8; color: var(--d-ink-2); background: #fff; border: 1px solid var(--d-line); border-left: 4px solid var(--d-brand); border-radius: 12px; padding: 16px 18px; }
.d5-note.forest { border-left-color: var(--d-forest); }
.d5-note b { display: block; color: var(--d-ink); font-size: 15px; margin-bottom: 4px; }

/* ---------- 流程總覽 SVG ---------- */
.flow-map { margin: 30px 0 0; background: #fff; border: 1px solid var(--d-line); border-radius: var(--r); padding: 18px 14px 8px; }
.flow-map svg { width: 100%; height: auto; display: block; }
.fm-box { fill: #fff; stroke: var(--d-line); stroke-width: 1.5; transition: fill .2s, stroke .2s; }
.fm-node { cursor: pointer; }
.fm-node:hover .fm-box, .fm-node:focus .fm-box { fill: var(--d-brand-soft); stroke: var(--d-brand); }
.fm-node:focus { outline: none; }
.fm-no { font: 800 11px var(--d-font-mono); fill: var(--d-brand-strong); }
.fm-label { font: 700 13.5px "Noto Sans TC", sans-serif; fill: var(--d-ink); }
.fm-sub { font: 500 11px "Noto Sans TC", sans-serif; fill: var(--d-ink-3); }
.fm-line { stroke: var(--d-ink-3); stroke-width: 1.5; fill: none; stroke-dasharray: 4 4; }
.fm-phase { font: 800 11px var(--d-font-mono); letter-spacing: .12em; }
.fm-phase.p1 { fill: var(--d-brand-strong); }
.fm-phase.p2 { fill: var(--d-gem); }
.fm-phase.p3 { fill: var(--d-forest); }
.flow-map p { font-size: 12.5px; color: var(--d-ink-3); text-align: center; margin: 4px 0 6px; }

/* ---------- 關卡 ---------- */
.stage { padding: 64px 0 0; }
.stage-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 36px; align-items: start; }
.stage-intro { position: sticky; top: calc(var(--hdr) + 70px); }
.stage-num { display: inline-block; font: 800 12px/1 var(--d-font-mono); letter-spacing: .14em; color: #fff; background: var(--d-brand-grad); border-radius: 999px; padding: 6px 11px; }
.stage-num.forest { background: var(--d-forest-grad); }
.stage-intro h3 { margin: 14px 0 0; font-size: clamp(22px,2.4vw,30px); font-weight: 900; line-height: 1.3; }
.stage-def { margin-top: 12px; }
.stage-tag { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.d5-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 4px 10px; background: var(--d-brand-soft); color: var(--d-brand-strong); }
.d5-badge.forest { background: var(--d-forest-soft); color: var(--d-forest); }
.d5-badge.gem { background: var(--d-gem-soft); color: var(--d-gem); }
.d5-badge.ink { background: #EFEDE9; color: var(--d-ink-2); }
.stage-tip { margin-top: 16px; font-size: 14px; line-height: 1.75; color: var(--d-ink-2); background: #FFFBEA; border: 1px dashed #E7C979; border-radius: 12px; padding: 12px 14px; }
.stage-tip b { display: block; color: #8A6100; font-size: 13px; margin-bottom: 2px; }
.stage-interactive { background: var(--d-glass); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,.75); outline: 1px solid var(--d-line); border-radius: var(--r); padding: 22px; box-shadow: 0 24px 50px -38px rgba(31,30,27,.45); }
.si-label { font: 800 11.5px/1.4 var(--d-font-mono); letter-spacing: .08em; color: var(--d-ink-3); margin: 0 0 10px !important; text-transform: uppercase; }
.si-label + * { margin-top: 0; }
.si-block + .si-block { margin-top: 22px; }

/* ---------- 步驟清單（逐步教學） ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps > li { position: relative; counter-increment: st; padding: 0 0 18px 46px; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--d-ink); color: #fff; font: 800 13px/30px var(--d-font-mono); text-align: center; }
.steps > li::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px; width: 1.5px; background: var(--d-line); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps > li > b { display: block; font-size: 15.5px; color: var(--d-ink); line-height: 1.5; padding-top: 4px; }
.steps > li > p, .steps > li > div { font-size: 14.5px; margin: 4px 0 0; }
.steps.brand > li::before { background: var(--d-brand-grad); }
.steps.forest > li::before { background: var(--d-forest-grad); }

/* ---------- 模擬畫面（瀏覽器框） ---------- */
.mock { border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 16px 36px -28px rgba(31,30,27,.5); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #F3EFE8; border-bottom: 1px solid var(--d-line); }
.mock-bar i.dot { width: 9px; height: 9px; border-radius: 50%; background: #E0D6C8; display: block; }
.mock-bar .url { margin-left: 8px; flex: 1; font: 500 11.5px var(--d-font-mono); color: var(--d-ink-3); background: #fff; border-radius: 6px; padding: 3px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mock-body { padding: 14px; }
.mock-split { display: grid; grid-template-columns: 1fr 1.25fr; min-height: 210px; }
.mock-chat { border-right: 1px solid var(--d-line); padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #FCFAF7; }
.mock-chat .m { font-size: 11.5px; line-height: 1.55; border-radius: 10px; padding: 7px 9px; }
.mock-chat .m.u { background: #EFEAE2; align-self: flex-end; max-width: 90%; }
.mock-chat .m.a { background: #fff; border: 1px solid var(--d-line); max-width: 95%; }
.mock-chat .m.a .chip { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 700; color: var(--d-brand-strong); border: 1px solid var(--d-brand-soft); border-radius: 8px; padding: 5px 7px; background: #FFF8F4; }
.mock-chat .inputbox { margin-top: auto; font-size: 11px; color: var(--d-ink-3); border: 1px solid var(--d-line); border-radius: 10px; padding: 7px 9px; background: #fff; }
.mock-preview { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mock-preview .tabs { display: flex; gap: 4px; font-size: 10.5px; font-weight: 700; }
.mock-preview .tabs span { padding: 3px 8px; border-radius: 6px; color: var(--d-ink-3); }
.mock-preview .tabs span.on { background: var(--d-ink); color: #fff; }
.mock-preview .tabs .act { margin-left: auto; color: var(--d-brand-strong); }
.mini-site { flex: 1; border-radius: 8px; overflow: hidden; background: #14110F; color: #fff; display: flex; flex-direction: column; }
.mini-site .hero { flex: 1; padding: 14px; background: radial-gradient(circle at 75% 30%, rgba(173,255,120,.35), transparent 45%), linear-gradient(160deg, #1d2a1f, #0d0f0c); }
.mini-site .hero small { font: 700 8px var(--d-font-mono); letter-spacing: .2em; color: #B8F27C; }
.mini-site .hero b { display: block; font-size: 18px; font-weight: 900; margin-top: 4px; line-height: 1.2; }
.mini-site .hero span { display: inline-block; margin-top: 8px; font-size: 9px; background: #B8F27C; color: #111; border-radius: 99px; padding: 3px 9px; font-weight: 800; }
.mini-site .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 6px; background: #0d0f0c; }
.mini-site .grid3 i { display: block; aspect-ratio: 1; border-radius: 4px; background: linear-gradient(135deg,#2c3a2d,#56704a); }
.mock-caption { font-size: 12.5px !important; color: var(--d-ink-3) !important; margin: 8px 2px 0 !important; text-align: center; }
.callout-pin { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--d-warn); color: #fff; font: 800 10px/1 var(--d-font-mono); vertical-align: middle; margin-right: 4px; }

/* ---------- 工具比較卡 ---------- */
.chip-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-filter button { appearance: none; border: 1px solid var(--d-line); background: #fff; color: var(--d-ink-2); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: all .2s; }
.chip-filter button .n { font: 800 10.5px var(--d-font-mono); margin-left: 6px; opacity: .6; }
.chip-filter button:hover { border-color: var(--d-brand); }
.chip-filter button[aria-pressed="true"] { background: var(--d-ink); border-color: var(--d-ink); color: #fff; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.tool-card { background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 14px 15px; transition: transform .25s var(--d-ease), box-shadow .25s, opacity .25s; }
.tool-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -24px rgba(31,30,27,.55); }
.tool-card.is-hidden { display: none; }
.tool-card.pick { border-color: var(--d-brand); box-shadow: 0 0 0 3px var(--d-brand-soft); }
.tool-card .th { display: flex; align-items: center; gap: 10px; }
.tool-card .ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--d-ink-grad); }
.tool-card .ic.brand { background: var(--d-brand-grad); }
.tool-card .ic.gem { background: linear-gradient(135deg,#5B8DEF,#3D6FE0); }
.tool-card .ic.forest { background: var(--d-forest-grad); }
.tool-card .ic.pink { background: linear-gradient(135deg,#F06595,#C2255C); }
.tool-card h5 { margin: 0; font-size: 15.5px; font-weight: 900; }
.tool-card h5 small { display: block; font: 600 11px var(--d-font-mono); color: var(--d-ink-3); letter-spacing: .02em; }
.tool-card p { font-size: 13.5px; line-height: 1.7; margin: 8px 0 0; }
.tool-card .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.tool-card .meta span { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; background: #F3EFE8; color: var(--d-ink-2); }
.tool-card .meta span.free { background: var(--d-forest-soft); color: var(--d-forest); }
.tool-card .meta span.star { background: var(--d-brand-soft); color: var(--d-brand-strong); }
.tool-card a.go { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 800; color: var(--d-brand-strong); }

/* ---------- 表格 ---------- */
.d5-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; border: 1px solid var(--d-line); border-radius: 14px; overflow: hidden; }
.d5-table th { background: var(--d-ink); color: #fff; font-weight: 700; text-align: left; padding: 10px 12px; font-size: 13px; }
.d5-table td { padding: 10px 12px; border-top: 1px solid var(--d-line); vertical-align: top; color: var(--d-ink-2); line-height: 1.65; }
.d5-table td b { color: var(--d-ink); }
.d5-table tr:nth-child(even) td { background: #FCFAF7; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .d5-table { min-width: 560px; }

/* ---------- 網站架構產生器 ---------- */
.sec-pick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.sec-pick label { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--d-line); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.sec-pick label:hover { border-color: var(--d-brand); }
.sec-pick input { accent-color: var(--d-brand); margin-top: 5px; flex: 0 0 auto; }
.sec-pick b { display: block; font-size: 14px; color: var(--d-ink); line-height: 1.4; }
.sec-pick span { display: block; font-size: 12px; color: var(--d-ink-3); line-height: 1.5; }
.sec-pick label.req { background: #FFF8F4; }
.sitemap-out { margin-top: 14px; display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.wire { border: 2px solid var(--d-ink); border-radius: 12px; padding: 6px; background: #fff; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.wire i { display: block; font-style: normal; font-size: 10px; font-weight: 800; color: var(--d-ink-2); border-radius: 5px; background: #F3EFE8; padding: 6px 6px; text-align: center; animation: d5Pop .35s var(--d-ease); }
.wire i.nav { background: var(--d-ink); color: #fff; padding: 3px; }
.wire i.hero { background: var(--d-brand-soft); color: var(--d-brand-strong); padding: 16px 6px; }
.wire i.foot { background: #E5DED2; padding: 3px; }
@keyframes d5Pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.sitemap-out ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--d-ink-2); }
.sitemap-out ol li { margin-bottom: 3px; }
.sitemap-out ol li b { color: var(--d-ink); }

/* ---------- 提示詞產生器 ---------- */
.pb-row { margin-bottom: 14px; }
.pb-row > b { display: block; font-size: 13px; font-weight: 800; color: var(--d-ink); margin-bottom: 6px; }
.pb-row > b small { font-weight: 500; color: var(--d-ink-3); margin-left: 6px; }
.chip-select { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-select button { appearance: none; border: 1px solid var(--d-line); background: #fff; color: var(--d-ink-2); font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 11px; cursor: pointer; transition: all .2s; }
.chip-select button:hover { border-color: var(--d-brand); }
.chip-select button[aria-pressed="true"] { background: var(--d-brand); border-color: var(--d-brand); color: #fff; }
.pb-input { width: 100%; border: 1px solid var(--d-line); border-radius: 10px; padding: 8px 11px; font-size: 14px; font-family: inherit; color: var(--d-ink); background: #fff; }
.pb-input:focus { outline: 2px solid var(--d-brand-soft); border-color: var(--d-brand); }
.pb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- 程式／提示詞區塊（含複製鈕） ---------- */
.prompt-box { position: relative; background: #1F1E1B; color: #F4EFE6; border-radius: 14px; padding: 16px 16px 14px; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; font-family: "Noto Sans TC", var(--d-font-mono), sans-serif; margin: 0; }
.prompt-box .ph { color: #F2B28F; font-weight: 700; }
.prompt-wrap { position: relative; }
.prompt-wrap .ptitle { display: flex; align-items: center; gap: 8px; font: 800 11.5px var(--d-font-mono); letter-spacing: .06em; color: #fff; background: #36332D; border-radius: 14px 14px 0 0; padding: 8px 14px; }
.prompt-wrap > .ptitle { min-height: 42px; padding-right: 96px; }
.prompt-wrap .ptitle ~ .prompt-box { border-radius: 0 0 14px 14px; } /* 標題列與內容框接成同一張卡（複製鈕夾在中間也適用） */
.prompt-wrap > .ptitle + .copy-btn { top: 21px; transform: translateY(-50%); }
.prompt-wrap .ptitle i { color: #F2B28F; }
.copy-btn { position: absolute; top: 6px; right: 8px; z-index: 2; appearance: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 3px 10px; cursor: pointer; transition: background .2s; }
.copy-btn:hover { background: rgba(255,255,255,.2); }
.copy-btn.ok { background: var(--d-good); border-color: var(--d-good); }
.prompt-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--d-ink-3); margin-top: 6px; }

/* ---------- 對話示範卡 ---------- */
.chat-card { background: #fff; border: 1px solid var(--d-line); border-radius: 16px; overflow: hidden; margin-top: 18px; }
.chat-card .cbar { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #fff; background: var(--d-brand-grad); padding: 9px 14px; }
.chat-card.gem .cbar { background: linear-gradient(135deg,#5B8DEF,#3D6FE0); }
.chat-card.forest .cbar { background: var(--d-forest-grad); }
.chat-card .cbar .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .85; }
.chat-card .cbody { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chat-card .bubble { max-width: 92%; font-size: 14px; line-height: 1.75; border-radius: 14px; padding: 10px 13px; color: var(--d-ink-2); }
.chat-card .bubble.user { align-self: flex-end; background: #F3EFE8; border-bottom-right-radius: 4px; color: var(--d-ink); }
.chat-card .bubble.reply { align-self: flex-start; background: #FFF8F4; border: 1px solid var(--d-brand-soft); border-bottom-left-radius: 4px; }
.chat-card.gem .bubble.reply { background: #F5F8FF; border-color: var(--d-gem-soft); }
.chat-card .ccap { font-size: 12.5px !important; color: var(--d-ink-3) !important; margin: 0 !important; padding: 0 14px 12px; }

/* ---------- 修改指令卡（迭代） ---------- */
.iter-list { display: grid; gap: 8px; }
.iter { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--d-line); border-radius: 12px; padding: 10px 12px; }
.iter .k { font-size: 12px; font-weight: 800; color: var(--d-brand-strong); background: var(--d-brand-soft); border-radius: 8px; padding: 4px 6px; text-align: center; }
.iter .t { font-size: 13.5px; color: var(--d-ink); line-height: 1.6; }
.iter .mini-copy { appearance: none; border: 1px solid var(--d-line); background: #fff; color: var(--d-ink-2); border-radius: 8px; font-size: 12px; font-weight: 700; padding: 4px 9px; cursor: pointer; }
.iter .mini-copy:hover { border-color: var(--d-brand); color: var(--d-brand-strong); }
.iter .mini-copy.ok { background: var(--d-good); color: #fff; border-color: var(--d-good); }

/* ---------- 好壞對照 ---------- */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dodont > div { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.7; }
.dodont .bad { background: #FFF1EE; border: 1px solid #F6C9BD; color: #7A2E1A; }
.dodont .good { background: #EEF8F2; border: 1px solid #BFE3CD; color: #1F5A3C; }
.dodont b { display: block; font-size: 13px; margin-bottom: 4px; }

/* ---------- 資料夾樹 ---------- */
.file-tree { font: 500 13px/1.85 var(--d-font-mono); background: #fff; border: 1px solid var(--d-line); border-radius: 12px; padding: 12px 16px; color: var(--d-ink); white-space: pre; overflow-x: auto; margin: 0; }
.file-tree .c { color: var(--d-ink-3); }
.file-tree .f { color: var(--d-brand-strong); font-weight: 700; }

/* ---------- 步驟切換器（Tabs） ---------- */
.d5-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #EFEAE2; padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.d5-tabs button { flex: 1 1 auto; appearance: none; border: 0; background: transparent; font-size: 13px; font-weight: 800; color: var(--d-ink-2); border-radius: 9px; padding: 8px 10px; cursor: pointer; transition: background .2s, color .2s; }
.d5-tabs button[aria-selected="true"] { background: #fff; color: var(--d-ink); box-shadow: 0 4px 10px -6px rgba(0,0,0,.3); }
.d5-tabpanel[hidden] { display: none; }

/* ---------- RWD 預覽 ---------- */
.rwd-ctrl { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.rwd-ctrl button { appearance: none; border: 1px solid var(--d-line); background: #fff; border-radius: 9px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); cursor: pointer; }
.rwd-ctrl button[aria-pressed="true"] { background: var(--d-ink); color: #fff; border-color: var(--d-ink); }
.rwd-stage { background: #EFEAE2; border-radius: 14px; padding: 16px; display: flex; justify-content: center; overflow: hidden; }
.rwd-frame { width: 100%; max-width: 100%; min-width: 180px; transition: width .45s var(--d-ease); background: #14110F; border-radius: 10px; overflow: hidden; color: #fff; border: 3px solid #2B2925; }
.rwd-frame .r-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 11px; font-weight: 800; background: #0D0F0C; }
.rwd-frame .r-nav .links { display: flex; gap: 10px; color: #B9B3A8; font-weight: 600; }
.rwd-frame .r-nav .burger { display: none; font-size: 15px; }
.rwd-frame .r-hero { padding: 22px 14px; background: radial-gradient(circle at 80% 20%, rgba(173,255,120,.3), transparent 50%), #1A2219; }
.rwd-frame .r-hero b { display: block; font-size: 22px; font-weight: 900; line-height: 1.2; }
.rwd-frame .r-hero span { font-size: 11px; color: #C9C3B8; }
.rwd-frame .r-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 10px; }
.rwd-frame .r-grid i { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg,#2c3a2d,#5f7d50); display: block; }
.rwd-frame.is-tablet .r-grid { grid-template-columns: repeat(2,1fr); }
.rwd-frame.is-phone .r-grid { grid-template-columns: 1fr 1fr; }
.rwd-frame.is-phone .r-nav .links { display: none; }
.rwd-frame.is-phone .r-nav .burger { display: block; }
.rwd-frame.is-phone .r-hero b { font-size: 17px; }
.rwd-note { font-size: 13px !important; margin: 10px 0 0 !important; color: var(--d-ink-2) !important; text-align: center; }

/* ---------- 部署選擇器 ---------- */
.deploy-q { display: grid; gap: 8px; }
.deploy-q button { appearance: none; text-align: left; border: 1px solid var(--d-line); background: #fff; border-radius: 12px; padding: 10px 13px; font-size: 14px; font-weight: 700; color: var(--d-ink); cursor: pointer; display: flex; gap: 10px; align-items: center; transition: border-color .2s, background .2s; }
.deploy-q button i { color: var(--d-forest); font-size: 17px; }
.deploy-q button:hover { border-color: var(--d-forest); }
.deploy-q button[aria-pressed="true"] { background: var(--d-forest-soft); border-color: var(--d-forest); }
.deploy-out { margin-top: 12px; background: #fff; border: 1px solid var(--d-forest); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--d-ink-2); }
.deploy-out b { color: var(--d-forest); }

/* ---------- 11 其他免費 AI：全寬版面＋額度比較 ---------- */
.stage-grid.wide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.stage-grid.wide .stage-intro { position: static; max-width: 56em; }
.quota-table { font-size: 13.5px; }
.quota-table td small { color: var(--d-ink-3); font-size: 11.5px; }
.quota-table td.y { color: var(--d-good); font-weight: 700; }
.quota-table td.m { color: #A26A00; font-weight: 700; }
.quota-table td.n { color: var(--d-warn); font-weight: 700; }
.table-scroll .quota-table { min-width: 1040px; table-layout: fixed; }
.quota-table th { white-space: nowrap; }
.quota-table th:nth-child(1) { width: 11%; }
.quota-table th:nth-child(2) { width: 22%; }
.quota-table th:nth-child(3) { width: 8%; }
.quota-table th:nth-child(4) { width: 10%; }
.quota-table th:nth-child(5) { width: 17%; }
.quota-table th:nth-child(6) { width: 8%; }
.quota-table th:nth-child(7) { width: 10%; }
.quota-table th:nth-child(8) { width: 14%; }
.quota-note { font-size: 12.5px !important; color: var(--d-ink-3) !important; margin: 8px 0 0 !important; }
.combo { margin: 18px 0 22px; background: var(--d-forest-soft); border: 1px solid #BFD8CE; border-radius: 14px; padding: 14px 18px; }
.combo > b { display: block; color: var(--d-forest); font-size: 15px; margin-bottom: 6px; }
.combo ol { margin: 0; padding-left: 22px; font-size: 14px; color: var(--d-ink-2); line-height: 1.85; }
.combo ol b { color: var(--d-ink); }
.alt-tabs button i { margin-right: 4px; }
.tool-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 14px; padding: 14px 18px; color: #fff; margin-bottom: 14px; background: var(--d-ink-grad); }
.tool-hero.gem { background: linear-gradient(135deg,#5B8DEF,#3D6FE0); }
.tool-hero.pink { background: linear-gradient(135deg,#F06595,#C2255C); }
.tool-hero b { display: block; font-size: 18px; font-family: var(--d-font-display); }
.tool-hero span { display: block; font-size: 12.5px; opacity: .85; }
.tool-hero a { flex: 0 0 auto; color: #fff; font-size: 13px; font-weight: 800; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; padding: 6px 12px; }
.tool-hero a:hover { background: rgba(255,255,255,.15); color: #fff; }
.cando { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cando > div { border-radius: 14px; padding: 14px 16px; }
.cando .can { background: #EEF8F2; border: 1px solid #BFE3CD; }
.cando .cant { background: #FFF5EE; border: 1px solid #F3D2C0; }
.cando b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.cando .can > b { color: #1F5A3C; }
.cando .cant > b { color: #9E3A16; }
.cando .can > b::before { content: "✓ "; }
.cando .cant > b::before { content: "! "; }
.cando ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.8; color: var(--d-ink-2); }
.cando ul li + li { margin-top: 3px; }
.saver { margin-top: 16px; font-size: 14px; line-height: 1.8; color: var(--d-ink-2); background: #fff; border: 1px dashed var(--d-brand); border-radius: 12px; padding: 12px 14px; }
.saver b { display: block; color: var(--d-brand-strong); font-size: 13.5px; margin-bottom: 2px; }
.credit-meter { background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.credit-meter .cm-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: baseline; }
.credit-meter .cm-head b { font-size: 15px; color: var(--d-ink); }
.credit-meter .cm-head span { font-size: 12.5px; color: var(--d-ink-3); }
.credit-meter .cm-bar { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin: 10px 0 8px; }
.credit-meter .cm-bar i { height: 14px; border-radius: 4px; background: linear-gradient(135deg,#F06595,#C2255C); }
.credit-meter p { font-size: 13.5px; margin: 0; }

/* ---------- FAQ ---------- */
.faq details { background: #fff; border: 1px solid var(--d-line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 12px 40px 12px 14px; font-size: 14.5px; font-weight: 800; color: var(--d-ink); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 14px; top: 9px; font: 800 18px var(--d-font-mono); color: var(--d-brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 14px 13px; font-size: 14px; color: var(--d-ink-2); line-height: 1.8; }
.faq details > div p { font-size: 14px; margin: 0 0 6px; }

/* ---------- 區段標題（非關卡區） ---------- */
.d5-section { padding-top: 80px; }
.d5-section-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.d5-section-head h3 { margin: 0; font-size: clamp(24px,2.8vw,32px); font-weight: 900; }
.d5-section-head p { margin: 0; max-width: 52em; }

/* ---------- 作業檢核 ---------- */
.checklist-band { background: #fff; border: 1px solid var(--d-line); border-radius: var(--r); padding: 22px; }
.checklist-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.checklist-progress .bar { flex: 1; height: 10px; border-radius: 99px; background: #EFEAE2; overflow: hidden; }
.checklist-progress .bar span { display: block; height: 100%; width: 0; background: var(--d-forest-grad); transition: width .4s var(--d-ease); }
.checklist-progress .pct { font: 800 13px var(--d-font-mono); color: var(--d-forest); white-space: nowrap; }
.checklist-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--d-line); border-radius: 12px; padding: 11px 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.check-item input { accent-color: var(--d-forest); margin-top: 5px; flex: 0 0 auto; }
.check-item b { display: block; font-size: 14px; color: var(--d-ink); }
.check-item span span { display: block; font-size: 12.5px; color: var(--d-ink-3); line-height: 1.55; }
.check-item:has(input:checked) { background: var(--d-forest-soft); border-color: #A9CDBF; }
.checklist-reset { margin-top: 14px; appearance: none; border: 1px solid var(--d-line); background: #fff; border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--d-ink-2); cursor: pointer; }

/* ---------- 作業卡 ---------- */
.hw-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; }
.hw-card { background: #fff; border: 1px solid var(--d-line); border-radius: var(--r); padding: 20px 22px; }
.hw-card h4 { margin: 0 0 8px; font-size: 19px; font-weight: 900; }
.hw-card ul { margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--d-ink-2); line-height: 1.85; }
.hw-card ul li b { color: var(--d-ink); }
.hw-card .score { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; color: var(--d-ink-2); }
.hw-card .score b { font: 800 14px var(--d-font-mono); color: var(--d-brand-strong); text-align: right; }

/* ---------- 延伸資源 ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.dl { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--d-line); border-radius: 14px; padding: 12px 14px; color: var(--d-ink); transition: transform .2s var(--d-ease), border-color .2s; }
.dl:hover { transform: translateY(-2px); border-color: var(--d-brand); color: var(--d-ink); }
.dl .ic { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--d-brand-soft); color: var(--d-brand-strong); font-size: 17px; }
.dl b { flex: 1; font-size: 14px; line-height: 1.4; }
.dl b small { display: block; font-size: 12px; color: var(--d-ink-3); font-weight: 500; }
.dl .go { color: var(--d-ink-3); font-weight: 800; }

.d5-alert { font-size: 14px; line-height: 1.75; color: #7A2E1A; background: #FFF1EE; border: 1px solid #F6C9BD; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.d5-alert b { color: #9E2A10; }
.d5-ok { font-size: 14px; line-height: 1.75; color: #1F5A3C; background: #EEF8F2; border: 1px solid #BFE3CD; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }

/* ---------- RWD ---------- */
@media (max-width: 991px) {
	.d5-intro { grid-template-columns: 1fr; gap: 24px; }
	.stage-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.stage-intro { position: static; }
	.checklist-grid, .dl-grid { grid-template-columns: 1fr 1fr; }
	.hw-grid, .d5-notes-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.d5-wrap { padding: 0 16px; }
	.stage { padding-top: 48px; }
	.stage-interactive { padding: 16px; }
	.tool-grid, .sec-pick, .checklist-grid, .dl-grid, .dodont, .pb-two, .cando { grid-template-columns: 1fr; }
	.tool-hero { flex-direction: column; align-items: flex-start; }
	.sitemap-out { grid-template-columns: 1fr; }
	.wire { max-width: 180px; }
	.mock-split { grid-template-columns: 1fr; }
	.mock-chat { border-right: 0; border-bottom: 1px solid var(--d-line); }
	.iter { grid-template-columns: 1fr auto; }
	.iter .k { grid-column: 1 / -1; justify-self: start; }
	.d5-stats .lbl { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.d5-page * { animation: none !important; transition: none !important; }
}

/* ---------- 手機防爆版：格線子元素不得被內容（寬表格、長網址）撐開 ---------- */
.d5-page :is(.stage-grid, .d5-intro, .hw-grid, .d5-notes-grid, .mock-split, .sitemap-out, .fmt-view, .motion-lab, .type-view, .ig-split, .cando, .dodont, .unit-grid, .grade-grid, .phase-grid, .case-band, .sc-intro, .wk-card, .key-grid, .quad-grid, .conv-out, .pushpull, .principles, .rule-grid) > * { min-width: 0; }
.d5-page .h-hero .d5-wrap > * { min-width: 0; }