/* ═══ guide.css：教學頁（PO GUIDE FIX 2026-09-14：移除功能分流彈窗、固定分頁列與「?」；只剩餐飲團訂內容） ═══ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #F8F4EE;
  color: #4A3728;
  line-height: 1.6;
  padding-top: 64px; /* header 56 + buffer（分頁列已移除） */
}

/* ── Layer 1：Sticky Header ── */
.gd-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: 56px; z-index: 100;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.gd-header-btn {
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;   /* 觸控目標 ≥44 */
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #4A3728;
  -webkit-tap-highlight-color: transparent;
}
.gd-header-btn:active { background: rgba(0,0,0,0.06); }
.gd-close { font-weight: bold; }
.gd-title {
  font-size: 16px; font-weight: 600; color: #4A3728;
  flex: 1; text-align: center;
}

.gd-header-spacer { width: 44px; height: 44px; flex-shrink: 0; }

/* ── 頁內導覽（非固定；只捲到既有段落） ── */
.gd-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 0 0 16px; padding: 10px 12px;
  background: #fff; border: 1px solid #F5F0EA; border-radius: 12px;
  font-size: 14px;
}
.gd-nav a {
  color: #C43E00; font-weight: 600; text-decoration: none;
  padding: 0 14px; border-radius: 999px; background: rgba(255,138,0,0.08);
  min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.gd-nav a:active { background: rgba(255,138,0,0.16); }
.gd-nav a:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }

/* ── Layer 3：Main ── */
.gd-main {
  max-width: 560px; margin: 0 auto;
  padding: 16px;
}

/* ── Sections ── */
.gd-section { margin-bottom: 24px; scroll-margin-top: 68px; } /* 固定頁首 56px：錨點不被遮住 */
.gd-section h2 {
  font-size: 18px; font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 2px solid #FF8A00;
  display: inline-block;
}

/* ── Cards ── */
.gd-card {
  background: #fff; border: 1px solid #F5F0EA;
  border-radius: 12px; padding: 16px;
  margin-bottom: 10px;
}
.gd-card.highlight {
  background: rgba(255,138,0,0.06); border-color: #FFCC80;
}
.gd-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.gd-card p { font-size: 14px; color: #4A3728; }

.gd-bullets { list-style: none; padding-left: 0; margin-top: 8px; }
.gd-bullets li {
  position: relative; padding-left: 18px;
  font-size: 14px; color: #5A4A38; line-height: 1.8;
}
.gd-bullets li::before {
  content: "•"; position: absolute; left: 6px; top: 0;
  color: #FF8A00; font-weight: bold;
}

/* ── Role cards (2 col) ── */
.gd-role-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.gd-role-card {
  background: #fff; border-radius: 12px; padding: 14px;
  text-align: center;
  border: 2px solid transparent;
}
.gd-role-card.owner {
  background: rgba(255,138,0,0.08);
  border-color: #FF8A00;
}
.gd-role-card.member {
  background: rgba(55,138,221,0.08);
  border-color: #378ADD;
}
.gd-role-icon { font-size: 32px; margin-bottom: 4px; }
.gd-role-label {
  font-size: 15px; font-weight: 700;
  margin-bottom: 4px;
}
.gd-role-card.owner .gd-role-label { color: #E57300; }
.gd-role-card.member .gd-role-label { color: #1E6DB8; }
.gd-role-desc { font-size: 14px; color: #5A4A38; }

/* ── 例子提示框 ── */
.gd-example {
  background: rgba(255,138,0,0.08);
  border-left: 3px solid #FF8A00;
  padding: 10px 14px; border-radius: 6px;
  margin-top: 10px;
  font-size: 14px; color: #6A4A28;
}

/* ── Steps ── */
.gd-steps { display: flex; flex-direction: column; gap: 10px; }

/* ── 六格選單介紹 ── */
.gd-menu-list { display: flex; flex-direction: column; gap: 12px; }
.gd-menu-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; }
.gd-menu-item .gd-menu-name { font-weight: 700; display: block; }
.gd-step {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #4A3728; line-height: 1.6;
}
.gd-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; border-radius: 50%;
  background: #FF8A00; color: #fff;
  font-size: 14px; font-weight: 600;
  flex-shrink: 0;
}

/* ── Divider ── */
.gd-divider {
  height: 2px; background: #F5F0EA;
  margin: 32px 0 24px;
}

/* ── FAQ ── */
.gd-faq-item {
  border: 1px solid #F5F0EA; border-radius: 10px;
  margin-bottom: 8px; overflow: hidden;
  background: #fff;
}
.gd-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: #4A3728;
  -webkit-tap-highlight-color: transparent;
}
.gd-faq-q:active { background: rgba(255,138,0,0.06); }
.gd-faq-arrow { color: #B0A090; font-size: 14px; flex-shrink: 0; }
.gd-faq-a {
  display: none;
  padding: 0 16px 14px; font-size: 14px;
  color: #6A5945; line-height: 1.7;
}

/* ── CTA ── */
.gd-cta {
  background: #FF8A00; color: #fff; border: none;
  padding: 14px 32px; border-radius: 10px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  margin-top: 12px;
  width: 100%;
}
.gd-cta:active { background: #E65100; }

.gd-contact { margin-top: 16px; margin-bottom: 40px; }

/* ── 服務資訊（POLICY-SUPPORT-ENTRY）：條款／隱私／客服三個外連；必讀 ≥14px、點擊區 ≥44px、可換行 ── */
.gd-policy { margin-top: 10px; }
.gd-policy-title { font-size: 14px; margin-bottom: 4px; }
.gd-policy-links { display: flex; flex-wrap: wrap; gap: 0 6px; }
.gd-policy-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font-size: 15px; font-weight: 600; color: var(--color-action-text, #B34000); text-decoration: underline; text-underline-offset: 3px; border-radius: 8px;
}
.gd-policy-links a:active { background: rgba(255,138,0,0.10); }
.gd-policy-links a:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }

/* ═══ 09A-P12：首屏兩條路、步驟、狀態、常見狀況、可用鍵盤的 FAQ —— 資訊優先，貓味點綴 ═══ */
.gd-hero { margin-bottom: 24px; padding: 18px 16px; background: var(--color-bg-card, #fff); border: 1px solid #F5F0EA; border-radius: 14px; scroll-margin-top: 68px; }
.gd-hero-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--color-text-strong, #2D2D2D); }
.gd-hero-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-text-primary, #4A3728); }
.gd-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.gd-path { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 14px; border-radius: 12px; text-decoration: none; background: var(--color-primary-light, #FFF3E0); border: 1.5px solid var(--color-action-text, #C43E00); color: var(--color-action-text, #C43E00); }
.gd-path:first-child { background: var(--color-action, #E65100); border-color: var(--color-action, #E65100); color: #fff; }
.gd-path-title { font-size: 17px; font-weight: 800; }
.gd-path-sub { font-size: 13px; font-weight: 500; opacity: .92; }
.gd-path:focus-visible, .gd-link:focus-visible, .gd-faq-q:focus-visible, .gd-more summary:focus-visible { outline: var(--focus-width, 3px) solid var(--focus-color, #B34000); outline-offset: 2px; }
@media (max-width: 340px) { .gd-paths { grid-template-columns: 1fr; } }

.gd-section h2 { scroll-margin-top: 68px; }
.gd-flow { list-style: none; counter-reset: gdflow; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-flow > li { counter-increment: gdflow; position: relative; padding: 12px 14px 12px 50px; background: var(--color-bg-card, #fff); border: 1px solid #F5F0EA; border-radius: 12px; font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.gd-flow > li::before { content: counter(gdflow); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--color-action, #E65100); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.gd-flow-h { display: block; font-weight: 700; color: var(--color-text-strong, #2D2D2D); }

.gd-sub { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--color-text-strong, #2D2D2D); }
.gd-states { margin-top: 12px; padding: 14px; background: var(--color-bg-card, #fff); border: 1px solid #F5F0EA; border-radius: 12px; }
.gd-state-list, .gd-trouble-list { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-state-list > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; align-items: baseline; }
.gd-state-list dd, .gd-trouble-list dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-primary, #4A3728); overflow-wrap: anywhere; }
.gd-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--color-bg-sunken, #F3EEE6); color: var(--color-text-strong, #2D2D2D); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gd-chip--draft { background: var(--color-primary-light, #FFF3E0); color: var(--color-action-text, #C43E00); box-shadow: inset 0 0 0 1px var(--color-action-text, #C43E00); }
.gd-chip--ok { background: var(--color-success-surface, #E8F5E9); color: var(--color-success-fg, #1B5E20); }
.gd-chip--ok::before { content: "✓ "; }

#records { margin-top: 12px; }
.gd-where { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; }
.gd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gd-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #E3D9CB; background: var(--color-bg-card, #fff); color: var(--color-action-text, #C43E00); font-size: 14px; font-weight: 700; text-decoration: none; }
.gd-link--primary { background: var(--color-action, #E65100); border-color: var(--color-action, #E65100); color: #fff; }

.gd-more { margin-top: 8px; }
.gd-more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--color-action-text, #C43E00); list-style: none; }
.gd-more summary::-webkit-details-marker { display: none; }
.gd-more summary::before { content: "▸"; margin-right: 6px; }
.gd-more[open] summary::before { content: "▾"; }
.gd-more p, .gd-mini { margin: 0 0 4px; font-size: 14px; line-height: 1.6; }
.gd-mini { padding-left: 1.4em; }
details.gd-card.gd-more { margin-top: 12px; padding: 4px 16px 12px; }

.gd-trouble-list > div { padding: 12px 14px; background: var(--color-bg-card, #fff); border: 1px solid #F5F0EA; border-radius: 12px; }
.gd-trouble-list dt { font-size: 15px; font-weight: 700; color: var(--color-text-strong, #2D2D2D); margin-bottom: 2px; }

.gd-faq-q { width: 100%; min-height: 48px; border: 0; background: none; text-align: left; font: inherit; color: inherit; gap: 10px; }
.gd-faq-a[hidden] { display: none; }
.gd-faq-a:not([hidden]) { display: block; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.gd-faq-q:focus-visible { outline-offset: -3px; }
.gd-where li { position: relative; padding-left: 16px; }
.gd-where li::before { content: "•"; position: absolute; left: 4px; color: var(--color-action-text, #C43E00); font-weight: 700; }
.gd-section h2 { border-bottom-color: var(--color-action-text, #C43E00); }
.gd-menu-details summary { min-height: 48px; }
.gd-summary-h { font-size: 16px; font-weight: 700; color: var(--color-action-text, #C43E00); }
.gd-menu-details .gd-step-num { background: var(--color-bg-sunken, #F3EEE6); color: var(--color-text-soft, #6A5945); font-size: 13px; min-width: 24px; height: 24px; }

/* 09A-P13：頁首返回與其他頁同一個說法（「← 返回」，行為不變：有上一頁就回上一頁，否則關閉視窗） */
.gd-header-btn.gd-close { width: auto; min-width: 44px; padding: 0 10px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--color-action-text, #B34000); }
.gd-header-spacer { width: 72px; }