@import url('/mk3/styles/public-chrome.css');

:root {
  --guide-ink: #202a37;
  --guide-muted: #596879;
  --guide-paper: #f5f3ed;
  --guide-panel: #fffdf8;
  --guide-line: #d7d4ca;
  --guide-navy: var(--navy-deep);
  --guide-teal: var(--orange);
  --guide-coral: var(--error-strong);
  --guide-sand: #eee3c9;
  --guide-soft-teal: #e3f0eb;
  --guide-radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--guide-paper); color: var(--guide-ink); font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; line-height: 1.72; }
a { color: var(--guide-navy); text-underline-offset: 3px; }
a:hover { color: var(--guide-teal); }
button { font: inherit; }
.guide-hero { background: var(--guide-navy); color: #f9f4e8; padding: 4.2rem 1.5rem 3.2rem; border-bottom: 6px solid var(--guide-teal); }
.guide-hero-inner, .guide-layout { max-width: 1180px; margin: 0 auto; }
.guide-kicker { color: var(--orange-soft); font-size: .83rem; letter-spacing: .12em; margin: 0 0 .7rem; font-weight: 700; }
.guide-hero h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4.5rem); letter-spacing: -.06em; line-height: 1.05; }
.guide-hero h1 span { color: var(--orange); }
.guide-lead { max-width: 52rem; font-size: 1.1rem; margin: 1rem 0 0; color: #e7e1d4; }
.guide-meta { margin: 1.1rem 0 0; font-size: .9rem; color: var(--orange-soft); }
.guide-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.guide-button { border: 1px solid transparent; border-radius: 999px; padding: .58rem 1rem; cursor: pointer; text-decoration: none; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; }
.guide-button.primary { background: var(--orange); color: var(--navy-deep); }
.guide-button.secondary { background: transparent; color: #f9f4e8; border-color: var(--orange); }
.guide-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 3.2rem; padding: 2.6rem 1.5rem 4.5rem; }
.guide-toc { position: sticky; top: 1rem; align-self: start; background: #e9eee8; border-top: 4px solid var(--guide-teal); padding: 1.1rem; }
.guide-toc h2 { font-size: .88rem; letter-spacing: .08em; margin: 0 0 .55rem; color: var(--guide-navy); }
.guide-toc ol { margin: 0; padding-left: 1.25rem; font-size: .88rem; }
.guide-toc li { padding: .18rem 0; }
.guide-toc a { text-decoration: none; }
.guide-content { min-width: 0; }
.guide-section { padding: 2.25rem 0; border-bottom: 1px solid var(--guide-line); }
.guide-section:first-child { padding-top: 0; }
.guide-section h2 { color: var(--guide-navy); font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.035em; line-height: 1.18; margin: 0 0 .85rem; }
.guide-section h3 { color: var(--guide-navy); font-size: 1.08rem; margin: 1.55rem 0 .48rem; }
.guide-section p, .guide-section li { font-size: .97rem; }
.guide-section ul, .guide-section ol { padding-left: 1.35rem; }
.guide-section li + li { margin-top: .34rem; }
.guide-intro { font-size: 1.06rem; color: var(--guide-muted); margin-top: 0; }
.callout { border-left: 4px solid var(--guide-teal); background: var(--guide-soft-teal); padding: .85rem 1rem; margin: 1.1rem 0; }
.callout strong { color: var(--guide-navy); }
.callout.boundary { border-color: var(--guide-coral); background: #f8ece5; }
.definition-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; margin-top: 1rem; }
.definition { background: var(--guide-panel); border: 1px solid var(--guide-line); padding: .85rem 1rem; border-radius: var(--guide-radius); }
.definition dt { font-weight: 800; color: var(--guide-navy); }
.definition dd { margin: .28rem 0 0; font-size: .91rem; }
.role-table, .status-table { width: 100%; border-collapse: collapse; background: var(--guide-panel); margin: 1rem 0; font-size: .9rem; }
.role-table th, .role-table td, .status-table th, .status-table td { border: 1px solid var(--guide-line); padding: .7rem; vertical-align: top; text-align: left; }
.role-table th, .status-table th { background: #e9eee8; color: var(--guide-navy); }
.quickstart { display: grid; gap: .85rem; }
.quick-card { background: var(--guide-panel); border: 1px solid var(--guide-line); border-radius: var(--guide-radius); padding: 1rem 1.1rem; }
.quick-card h3 { margin: 0 0 .3rem; }
.quick-card p { margin: 0; font-size: .91rem; }
.steps { counter-reset: guide-step; padding-left: 0 !important; list-style: none; }
.steps li { position: relative; padding-left: 2.3rem; margin: .75rem 0; }
.steps li::before { counter-increment: guide-step; content: counter(guide-step); position: absolute; left: 0; top: .08rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--guide-navy); color: #fffaf0; line-height: 1.45rem; text-align: center; font-size: .76rem; font-weight: 800; }
.example { background: var(--guide-sand); padding: .9rem 1rem; margin: 1rem 0; border-radius: 3px; font-size: .94rem; }
.flow-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.flow-card { padding: .9rem; background: #e9eee8; border-top: 3px solid var(--guide-teal); }
.flow-card h3 { margin: 0 0 .3rem; font-size: 1rem; }
.flow-card p { margin: 0; font-size: .89rem; }
.guide-footer { max-width: 1180px; padding: 1.5rem; margin: 0 auto; color: var(--guide-muted); font-size: .84rem; }
.guide-footer p { border-top: 1px solid var(--guide-line); padding-top: 1rem; }

@media (max-width: 800px) {
  .guide-hero { padding-top: 3rem; }
  .guide-layout { display: block; padding-top: 1.5rem; }
  .guide-toc { position: static; margin-bottom: 2rem; }
  .definition-grid, .flow-grid { grid-template-columns: 1fr; }
  .role-table, .status-table { display: block; overflow-x: auto; white-space: normal; }
}
@media print {
  @page { margin: 14mm; }
  body { background: #fff; color: #17222d; font-size: 10.5pt; }
  .mk-nav, .guide-actions, .guide-toc { display: none !important; }
  .guide-hero { background: #fff; color: var(--navy-deep); border-bottom: 2px solid var(--orange); padding: 0 0 8mm; }
  .guide-hero h1, .guide-lead, .guide-meta { color: var(--navy-deep); }
  .guide-layout { display: block; padding: 8mm 0; }
  .guide-section { break-inside: avoid; padding: 6mm 0; }
  .quick-card, .definition, .flow-card, .callout, .example { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}