/* ── AACPOJ 學習平台介紹頁（page-platform.php）────────────────────────
   配色與按鈕沿用 page-apcs.css（深 teal hero、#00a896 主色、白卡片），兩頁看起來是同一組說明頁。
   截圖一律放在 .pf-frame（圓角＋細框＋陰影）裡，看得出是網站畫面。 */
.pf-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Segoe UI', sans-serif;
  color: #0f172a;
  background: #f8fafc;
}
.pf-page *, .pf-page *::before, .pf-page *::after { box-sizing: border-box; }
.pf-page img, .pf-page svg { display: block; max-width: 100%; height: auto; }

/* ── Hero ── */
.pf-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #0a3d42 100%);
  padding: 56px 20px 120px;
  text-align: center;
}
.pf-hero-inner { max-width: 760px; margin: 0 auto; }
.pf-hero-pill {
  display: inline-block; padding: 4px 16px; border-radius: 999px; margin-bottom: 16px;
  background: rgba(0,168,150,.18); border: 1px solid rgba(0,168,150,.4);
  color: #5eead4; font-size: .75rem; font-weight: 800; letter-spacing: .1em;
}
.pf-hero-title {
  font-size: clamp(1.9rem,4.4vw,3rem); font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1.1; margin: 0 0 16px;
}
.pf-hero-title em {
  display: block; margin-top: 10px;
  font-style: normal; color: #5eead4;
  font-size: clamp(1rem,2vw,1.35rem); font-weight: 700; letter-spacing: 0; line-height: 1.4;
}
.pf-hero-desc { font-size: .98rem; color: rgba(200,230,255,.82); max-width: 60ch; margin: 0 auto 26px; line-height: 1.8; }
.pf-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pf-hero-note { margin: 18px 0 0; font-size: .82rem; color: rgba(200,230,255,.65); }
.pf-hero-note a { color: #5eead4; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.pf-hero-note a:hover { color: #99f6e4; }

/* ── Buttons ── */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 26px; border-radius: 999px;
  font-size: .92rem; font-weight: 700; line-height: 1.3;
  text-decoration: none !important; transition: background .15s, transform .15s, box-shadow .15s;
}
.pf-btn-p { background: #00a896; color: #fff !important; box-shadow: 0 2px 10px rgba(0,168,150,.3); }
.pf-btn-p:hover { background: #00786c; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,168,150,.35); }
.pf-btn-s { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.35); color: #fff !important; }
.pf-btn-s:hover { background: rgba(255,255,255,.18); color: #fff !important; }
.pf-btn-o { background: #fff; border: 1.5px solid #00a896; color: #00786c !important; }
.pf-btn-o:hover { background: #f0faf8; color: #005a51 !important; }
.pf-btn-line { background: #06c755; color: #fff !important; box-shadow: 0 2px 10px rgba(6,199,85,.3); }
.pf-btn-line:hover { background: #05a547; color: #fff !important; transform: translateY(-2px); }
.pf-btn:focus-visible, .pf-more:focus-visible, .pf-page a:focus-visible { outline: 2px solid #00a896; outline-offset: 3px; }

/* ── Body ── */
.pf-body { max-width: 1040px; margin: 0 auto; padding: 0 20px 80px; }
.pf-section { margin-bottom: 64px; }
.pf-section-title {
  font-size: 1.25rem; font-weight: 900; color: #0f172a;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 3px solid #00a896; display: inline-block;
  scroll-margin-top: 92px;  /* hero 的「說明在下方」錨點：預留固定頁首 */
}
.pf-section-lead { margin: 0 0 24px; font-size: .95rem; line-height: 1.8; color: #475569; max-width: 70ch; }

/* ── 截圖外框 ── */
.pf-frame {
  border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid #e2e8f0; box-shadow: 0 10px 30px rgba(15,23,42,.10);
}
.pf-frame-bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  background: #0f172a; color: rgba(200,230,255,.7); font-size: .74rem;
}
.pf-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #334155; display: inline-block; }
.pf-frame-bar i:nth-child(1) { background: #f87171; }
.pf-frame-bar i:nth-child(2) { background: #fbbf24; }
.pf-frame-bar i:nth-child(3) { background: #34d399; }
.pf-frame-bar span { margin-left: 10px; padding: 2px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }

/* 題目頁大圖：疊在 hero 下緣 */
.pf-showcase { margin: -84px auto 56px; max-width: 940px; }
.pf-showcase figcaption { margin-top: 14px; text-align: center; font-size: .88rem; color: #475569; }

/* ── 兩種使用方式 ── */
.pf-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pf-mode {
  padding: 24px 24px 22px; border-radius: 16px; background: #fff;
  border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.pf-mode-course { border: 2px solid #00a896; background: #f0faf8; }
.pf-mode h3 { margin: 10px 0 12px; font-size: 1.08rem; font-weight: 800; line-height: 1.4; }
.pf-mode-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.pf-badge-free { background: #e2e8f0; color: #334155; }
.pf-badge-course { background: #00a896; color: #fff; }
.pf-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pf-checks li { position: relative; padding-left: 26px; font-size: .9rem; line-height: 1.7; color: #334155; }
.pf-checks li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 17px; height: 17px; border-radius: 50%;
  background: #00a896 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ── 圖文列（免費功能、學員一週） ── */
.pf-row, .pf-step {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 28px 36px;
  align-items: center; margin-bottom: 40px;
}
.pf-row-rev .pf-row-media, .pf-step:nth-child(even) .pf-row-media { order: 2; }
.pf-row-text h3 { margin: 6px 0 10px; font-size: 1.15rem; font-weight: 800; line-height: 1.4; }
.pf-row-text p { margin: 0; font-size: .93rem; line-height: 1.85; color: #475569; }
.pf-row-text strong { color: #0f172a; }
.pf-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .1em; color: #00a896; }
.pf-more { display: inline-block; margin-top: 12px; font-size: .88rem; font-weight: 700; color: #00786c; text-decoration: none; }
.pf-more:hover { text-decoration: underline; color: #005a51; }

.pf-steps { list-style: none; margin: 0; padding: 0; }
.pf-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #00a896; color: #fff; font-weight: 800; font-size: .95rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.pf-step-text { grid-template-columns: minmax(0, 1fr); }
.pf-step-text .pf-row-text {
  padding: 22px 24px; border-radius: 16px; background: #fff; border: 1px dashed #9fd4cb;
}
.pf-thumb { margin-top: 16px; max-width: 320px; }
.pf-art svg { width: 100%; }
.pf-art text { font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'Segoe UI', sans-serif; }

/* 小卡（線上評測、討論區） */
.pf-mini-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-mini {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px;
  background: #fff; border: 1px solid #e2e8f0; border-top: 3px solid #00a896;
}
.pf-mini strong { font-size: .98rem; font-weight: 800; }
.pf-mini span { font-size: .87rem; line-height: 1.75; color: #475569; }
.pf-mini a { color: #00786c; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pf-mini a:hover { text-decoration: underline; }

/* ── 平台費 ── */
.pf-fee-card { margin: 0; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(15,23,42,.05); }
.pf-fee-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 20px; padding: 18px 24px; border-top: 1px solid #eef2f6; }
.pf-fee-row:first-child { border-top: 0; }
.pf-fee-main { background: #f0faf8; }
.pf-fee-row dt { font-weight: 800; color: #00786c; font-size: .92rem; }
.pf-fee-row dd { margin: 0; font-size: .93rem; line-height: 1.8; color: #334155; }
.pf-fee-row dd strong { font-size: 1.1rem; color: #0f172a; }
.pf-fee-row a { color: #00786c; font-weight: 700; }

/* ── FAQ ── */
.pf-faq { display: grid; gap: 10px; }
.pf-faq-item { border-radius: 12px; background: #fff; border: 1px solid #e2e8f0; padding: 0 20px; }
.pf-faq-item summary { cursor: pointer; padding: 16px 0; font-weight: 800; font-size: .96rem; list-style: none; position: relative; padding-right: 28px; }
.pf-faq-item summary::-webkit-details-marker { display: none; }
.pf-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: #00a896; }
.pf-faq-item[open] summary::after { content: "−"; }
.pf-faq-item p { margin: 0 0 16px; font-size: .92rem; line-height: 1.85; color: #475569; }

/* ── CTA ── */
.pf-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: 28px 32px; border-radius: 18px;
  background: linear-gradient(135deg, #0C2E31 0%, #0E3A38 70%, #0F4540 100%); color: #EAF6F3;
}
.pf-cta h3 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; color: #fff; }
.pf-cta p { margin: 0; font-size: .9rem; color: #B7D9D2; line-height: 1.7; }
.pf-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── 響應式 ── */
@media (max-width: 860px) {
  .pf-mini-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .pf-hero { padding: 44px 16px 96px; }
  .pf-body { padding: 0 16px 64px; }
  .pf-showcase { margin-top: -70px; margin-bottom: 44px; }
  .pf-modes { grid-template-columns: minmax(0, 1fr); }
  .pf-row, .pf-step { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 36px; }
  .pf-row-rev .pf-row-media, .pf-step:nth-child(even) .pf-row-media { order: 0; }
  .pf-thumb { max-width: none; }
  .pf-fee-row { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
  .pf-cta { padding: 22px 20px; }
  .pf-cta-btns { width: 100%; }
  .pf-cta-btns .pf-btn { flex: 1 1 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
  .pf-cta-btns .pf-btn-p { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-btn { transition: none; }
}