/* Mori Canvas 文件站共用樣式 — 暖紙 + 森林,與 app 同語言。各頁引用,別在頁內複製整份。 */
:root {
	--bg: #faf7f1;
	--surface: #fffdf8;
	--ink: #1c1a17;
	--soft: #6b655c;
	--line: #e8e1d4;
	--accent: #b4530a;
	--accent-soft: #f6e9dc;
	--yellow: #f7e3a6;
	--green: #c4e3bc;
	--blue: #bdd6f1;
	--red: #f3c8be;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Noto Sans TC', system-ui, sans-serif;
	line-height: 1.75;
	font-size: 16px;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 22px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--accent-soft); color: #8a3f06; padding: 1px 6px; border-radius: 5px; font-size: 0.9em; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
pre { background: #2a2520; color: #f3ece0; padding: 14px 16px; border-radius: 12px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; }
pre code { background: none; color: inherit; padding: 0; }
h1, h2, h3 { font-family: 'Fraunces', 'Noto Sans TC', serif; line-height: 1.25; }

/* 頂部導覽列(每頁相同) */
.topnav { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 241, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 18px; padding: 10px 22px; max-width: 980px; margin: 0 auto; }
.topnav .brand { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; color: var(--ink); }
.topnav .links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-left: auto; font-size: 14px; }
.topnav .links a { color: var(--soft); }
.topnav .links a.on { color: var(--accent); font-weight: 600; }
.topnav .links a.try { background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 9px; font-weight: 600; }
.topnav .links a.try:hover { text-decoration: none; filter: brightness(1.05); }

/* hero / 頁頭 */
header.hero { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); padding: 56px 0 40px; text-align: center; }
.hero img.logo { width: 74px; height: 74px; border-radius: 18px; box-shadow: 0 10px 30px -10px rgba(180, 83, 10, 0.4); }
.hero h1 { font-size: 38px; margin: 18px 0 6px; font-weight: 600; }
.hero .tag { color: var(--soft); font-size: 17px; max-width: 620px; margin: 0 auto 8px; }
.flow { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 13.5px; color: var(--soft); margin: 14px 0 22px; }
.flow b { color: var(--ink); }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 22px; border-radius: 11px; font-weight: 600; font-size: 15px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn:hover { text-decoration: none; filter: brightness(0.98); box-shadow: 0 6px 18px -8px rgba(28, 26, 23, 0.25); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
header.page { padding: 40px 0 8px; }
header.page h1 { font-size: 32px; margin: 0 0 4px; }
header.page p.lead { color: var(--soft); margin: 0; font-size: 16.5px; }

.devnote { background: #fff7ed; border: 1px solid #f3d9b8; border-radius: 14px; padding: 16px 18px; margin: 28px 0; font-size: 14.5px; }
.devnote b { color: var(--accent); }

section { padding: 30px 0; border-bottom: 1px solid var(--line); }
section h2 { font-size: 25px; margin: 0 0 4px; }
section h2 .num { color: var(--accent); font-weight: 700; margin-right: 8px; }
h3 { font-size: 18px; margin: 26px 0 6px; }

.steps { counter-reset: s; padding: 0; list-style: none; margin: 18px 0; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 46px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: 'Fraunces', serif; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--accent-soft); color: #8a3f06; font-weight: 700; }
td:first-child { white-space: nowrap; font-weight: 600; }
.say { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 1px 7px; font-size: 0.95em; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.cards.three { grid-template-columns: 1fr 1fr 1fr; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.card h4 { margin: 0 0 4px; font-size: 15.5px; }
.card p { margin: 0; font-size: 13.5px; color: var(--soft); line-height: 1.6; }
.card a.more { font-size: 13px; }

.shot { width: 100%; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 14px 30px -24px rgba(28, 26, 23, 0.45); display: block; margin: 14px 0; background: #fff; }

.video-stack { display: grid; gap: 16px; margin: 18px 0 4px; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.demo-video { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 14px 30px -24px rgba(28, 26, 23, 0.45); }
.demo-video video { display: block; width: 100%; aspect-ratio: 1674 / 1268; background: #1c1a17; object-fit: contain; }
.demo-video figcaption { padding: 12px 14px 14px; }
.demo-video h3 { margin: 0 0 3px; font-size: 17px; }
.demo-video p { margin: 0; color: var(--soft); font-size: 13.5px; line-height: 1.6; }

.kinds { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.kind { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.dot { width: 16px; height: 16px; border-radius: 5px; display: inline-block; }

.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px; margin: 26px 0; columns: 2; column-gap: 30px; font-size: 14.5px; }
.toc a { display: block; padding: 3px 0; color: var(--ink); }
.toc a:hover { color: var(--accent); }

/* 講法示範對話框 */
.utter { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-size: 14.5px; }
.utter .who { color: var(--soft); font-size: 12px; display: block; }

/* FAQ */
details.qa { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 14px 18px; margin: 10px 0; }
details.qa summary { cursor: pointer; font-weight: 600; font-size: 15.5px; }
details.qa p { color: var(--soft); font-size: 14.5px; }

footer { text-align: center; color: var(--soft); font-size: 13.5px; padding: 36px 0 50px; }
footer .links { margin-top: 6px; }
footer .links a { margin: 0 8px; }

@media (max-width: 640px) {
	.wrap { padding: 0 16px; }
	.cards, .cards.three, .video-grid { grid-template-columns: 1fr; }
	.toc { columns: 1; }
	.hero h1 { font-size: 30px; }
	.nav-inner { padding: 10px 14px; gap: 10px; }
	.topnav .links { gap: 10px; font-size: 13px; }
	.demo-video figcaption { padding: 10px 12px 12px; }
}