/* 文章頁 v3（2026-10-24，原型 02-UI雛形/article-v3.html）：讀起來像雜誌。只管 .a3 底下；地點、行程沿用 article-v2.css。
   2026-10-25 照 b4 稽核（deploy/v5-audit/_part-article.md）把數值改回原型：字重 900、內文 18px、h2 28px、閱讀欄 700、商品卡 220、單行購買按鈕、重點引言、接著讀放進閱讀欄、下一篇大卡 */
.a3 { --read: 700px; --cream: #faf8f3; --gold: #f2c94c; }
.prog { position: fixed; left: 0; top: 0; height: 3px; background: var(--brand); width: 0; z-index: 60; }
.a3 .crumb { padding-top: 16px; }
.a3-hero { margin-top: 24px; border-radius: 20px; overflow: hidden; }
.a3-hero figure { margin: 0; }
.a3-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 0; }
.a3-hero figcaption { padding: 6px 2px 0; text-align: right; }   /* 字級、顏色統一在 site.css 的 .img-note */
.a3-g { display: grid; grid-template-columns: minmax(0, var(--read)) 260px; gap: 72px; justify-content: center; margin-top: 36px; }
.a3-k { font-size: 14px; font-weight: 700; color: var(--brand-700); }
.a3-head h1 { font-size: 36px; font-weight: 900; line-height: 1.4; margin: 8px 0 14px; letter-spacing: .01em; }
.a3-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--ink-3); }
.a3-by b { color: var(--ink); font-weight: 700; }
.a3-by a { color: var(--brand-700); font-weight: 700; }
.a3-disc { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.75; padding: 12px 16px; background: var(--panel); border-radius: 12px; }
.a3-disc a { margin-left: 6px; color: var(--brand-700); }

.a3-b { font-size: 18px; line-height: 2; color: #262c31; }
.a3-b p { margin: 0 0 1.25em; }
.a3-lead p:first-child { font-size: 20px; line-height: 1.95; color: var(--ink); }
.a3-b h2 { font-size: 28px; font-weight: 900; line-height: 1.45; margin: 2.2em 0 .7em; scroll-margin-top: 90px; }
.a3-b h2 small { display: block; font-size: 14px; font-weight: 700; color: var(--brand); letter-spacing: .12em; margin-bottom: 4px; }
.a3-b h3 { font-size: 21px; font-weight: 900; margin: 1.6em 0 .5em; line-height: 1.5; }
.a3-b ul, .a3-b ol { margin: 0 0 1.25em; padding-left: 1.2em; }
.a3-b li { margin-bottom: .4em; }
.a3-b strong { color: var(--ink); }
.a3-b figure { margin: 2em 0; }
.a3-b figure img { border-radius: 16px; width: 100%; }
.a3-b figcaption, .a3-b figcaption.img-note { margin-top: 8px; text-align: center; font-size: 14px; color: #7d878f; }
.a3-b p a, .a3-b li a, .a3-b td a { color: var(--brand-700); }
/* 重點引言（Markdown 一行「> 」） */
.a3-b .quote { margin: 2em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--gold); font-size: 22px; font-weight: 700; line-height: 1.7; color: var(--ink); }

.a3-tocm { display: none; }
.a3-tldr { margin: 28px 0 8px; border-radius: 18px; background: var(--brand-50); padding: 22px 24px; }
.a3-tldr h2 { font-size: 15px; margin: 0 0 14px; letter-spacing: .12em; color: var(--brand-700); }
.a3-tldr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.a3-tldr-g.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a3-tldr-g a { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 12px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 12px; color: inherit; }
.a3-tldr-g.n3 a { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 10px; padding: 12px; }
.a3-tldr-g img { width: 68px; height: 68px; object-fit: contain; border-radius: 10px; background: #f1f2f4; }
.a3-tldr-g.n3 img { width: 100%; height: 130px; }
.a3-tldr-g small { display: block; font-size: 13px; font-weight: 700; color: var(--brand-700); line-height: 1.5; }
.a3-tldr-g small i { font-style: normal; display: inline-block; background: var(--brand-50); border-radius: 6px; padding: 0 7px; margin: 0 4px 3px 0; }
.a3-tldr-g b { display: block; font-size: 16px; line-height: 1.45; }
.a3-tldr-g span { font-size: 13.5px; color: var(--ink-2); }

.a3-tier { margin: 2.6em 0 1em; padding: 14px 18px; border-radius: 14px; background: var(--cream); font-size: 16px; color: var(--ink-2); }
.a3-tier b { font-size: 20px; color: var(--ink); margin-right: 10px; }
.a3-pick { margin: 1.6em 0 3em; padding-top: 1.6em; border-top: 1px solid var(--line); scroll-margin-top: 90px; position: relative; }
.a3-anc { position: absolute; top: -90px; }
.a3-pick-top { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: 1.1em; }
.a3-pi { position: relative; background: #f1f2f4; border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.a3-pi figure, .a3-pi picture { margin: 0; height: 100%; }
.a3-pi img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; }
.a3-pi .no { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 19px; }
.a3-pi .no.n1 { background: var(--gold); color: #3a2c00; }
.a3-fit { display: inline-block; font-size: 14px; font-weight: 700; color: #064c3a; background: var(--brand-50); border-radius: 999px; padding: 3px 12px; margin-bottom: 8px; line-height: 1.6; }
.a3-pick h3 { font-size: 24px; font-weight: 900; margin: 0 0 6px; line-height: 1.45; }
.a3-one { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 !important; line-height: 1.8; }
/* 單行購買按鈕（原型 .buyb）：多顆靠左排；蝦皮實心蝦皮橘；下面一行小字（擷取日、分潤連結、參考價、分潤揭露） */
.buyb { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; }
.buyb > a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 11px; background: var(--brand); color: #fff !important; font-weight: 700; font-size: 15.5px; line-height: 1; white-space: nowrap; }
.buyb > a:hover { background: var(--brand-700); }
.buyb > a.ch-shopee { background: #ee4d2d; }
.buyb > a.ch-shopee:hover { background: #d63f22; }
.buyb small { font-size: 12.5px; color: var(--ink-3); flex-basis: 100%; line-height: 1.7; }
.buyb small a { color: var(--brand-700); }
.buyb-aff { display: block; }
.a3-gov { font-size: 16px; color: var(--ink-2); background: var(--panel); border-radius: 12px; padding: 10px 14px; margin: 0 0 1em; }
.a3-gov b { color: var(--ink); }
.a3-po { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.2em 0; }
.a3-po > div { border-radius: 14px; padding: 14px 18px; font-size: 16px; line-height: 1.75; }
.a3-po .pp { background: #eef7f2; } .a3-po .pcn { background: #fff6e8; }
.a3-po h4 { font-size: 14px; margin: 0 0 6px; letter-spacing: .08em; }
.a3-po .pp h4 { color: var(--brand-700); } .a3-po .pcn h4 { color: #a2520d; }
.a3-po ul { margin: 0; padding-left: 1.1em; }
.a3-po li { margin: 0; }
details.a3-more { margin: 1em 0 0; border: 1px solid var(--line); border-radius: 12px; }
details.a3-more summary { cursor: pointer; list-style: none; padding: 12px 16px; font-size: 15px; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; line-height: 30px; }
details.a3-more summary::-webkit-details-marker { display: none; }
details.a3-more summary::after { content: "＋"; color: var(--brand); }
details.a3-more[open] summary::after { content: "－"; }
.a3-specl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; padding: 0 16px 12px; font-size: 15px; line-height: 1.6; }
.a3-specl div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.a3-specl span { color: var(--ink-3); }
.a3-specl b { font-weight: 500; text-align: right; }
.a3-specl em, .a3-specl .src { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 6px; font-weight: 400; }
.a3-report { display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--ink-3) !important; }
.a3-cmpw { overflow-x: auto; padding: 0 0 12px; }
.a3-cmpt { border-collapse: collapse; font-size: 14px; min-width: 760px; width: 100%; line-height: 1.5; }
.a3-cmpt th, .a3-cmpt td { padding: 8px 10px; border-top: 1px solid var(--line-2); text-align: center; white-space: nowrap; }
.a3-cmpt th:first-child, .a3-cmpt td:first-child { text-align: left; position: sticky; left: 0; background: #fff; }
.a3-cmpt thead th { font-size: 12.5px; color: var(--ink-3); }
.a3-faq details { border-bottom: 1px solid var(--line); }
.a3-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; line-height: 2; }
.a3-faq summary::-webkit-details-marker { display: none; }
.a3-faq summary::after { content: "＋"; color: var(--brand); flex: none; }
.a3-faq details[open] summary::after { content: "－"; }
.a3-faq details > div { font-size: 17px; }
.a3-faq details > div > :last-child { margin-bottom: 18px; }
.a3-end { margin-top: 3em; padding: 22px 24px; border-radius: 18px; background: var(--panel); font-size: 16px; color: var(--ink-2); line-height: 1.9; }
.a3-end h4 { font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.a3-end p { margin: 0; }
.a3-end a { color: var(--brand-700); font-weight: 700; }

.a3-toc { position: sticky; top: 92px; align-self: start; font-size: 14.5px; }
.a3-toc h4 { font-size: 13px; letter-spacing: .12em; color: var(--ink-3); margin: 0 0 10px; }
.a3-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--line); color: var(--ink-2); line-height: 1.5; }
.a3-toc a.on { border-color: var(--brand); color: #064c3a; font-weight: 700; }
.a3-toc .tb { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }

/* 接著讀（原型：放在閱讀欄裡的 .sh＋.g3＋.ac 卡） */
.a3-rel { margin: 56px 0 0; }
.a3-rel h2 { font-size: 28px; font-weight: 900; letter-spacing: .02em; margin: 0; }
.a3-rel-s { margin: 4px 0 26px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 15px; color: var(--ink-3); }
.a3-rel-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.a3-rc { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.a3-rc:hover { color: inherit; }
.a3-rc .im { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; background: var(--panel); }
.a3-rc .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.a3-rc:hover .im img { transform: scale(1.03); }
.a3-rc .kk { font-size: 13px; font-weight: 700; color: var(--brand-700); letter-spacing: .03em; }
.a3-rc .kk span { color: var(--ink-3); font-weight: 500; }
.a3-rc h3 { font-size: 19px; font-weight: 700; line-height: 1.5; margin: 0; }
.a3-rc:hover h3 { color: #064c3a; }
.a3-rc p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a3-rc .mt { font-size: 13px; color: var(--ink-3); }
/* 下一篇（原型 .next） */
.a3-next { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0; border-radius: 20px; overflow: hidden; background: var(--cream); margin-top: 40px; color: inherit; }
.a3-next:hover { color: inherit; }
.a3-next div { padding: 26px 28px; }
.a3-next small { font-size: 13px; font-weight: 700; color: var(--brand-700); letter-spacing: .1em; }
.a3-next b { display: block; font-size: 23px; font-weight: 900; line-height: 1.45; margin: 6px 0 8px; }
.a3-next p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.a3-next img { width: 100%; height: 100%; object-fit: cover; }
.a3-next .nim { display: block; min-height: 100%; overflow: hidden; } .a3-next .nim img { display: block; }   /* 圖片包一層（小人偶從圖片下緣探頭用） */

@media (max-width: 1080px) {
  .a3-g { grid-template-columns: minmax(0, var(--read)); gap: 0; }
  .a3-toc { display: none; }
  .a3-tocm { display: block; margin: 22px 0 6px; border: 1px solid var(--line); border-radius: 14px; }
  .a3-tocm summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 700; display: flex; justify-content: space-between; }
  .a3-tocm summary::-webkit-details-marker { display: none; }
  .a3-tocm summary::after { content: "展開"; color: var(--brand-700); font-size: 14px; }
  .a3-tocm[open] summary::after { content: "收起"; }
  .a3-tocm a { display: block; padding: 8px 16px; border-top: 1px solid var(--line-2); font-size: 15px; color: var(--ink-2); }
}
@media (max-width: 720px) {
  .a3-hero { margin-top: 12px; border-radius: 14px; } .a3-hero img { aspect-ratio: 3 / 2; }
  .a3-g { margin-top: 20px; }
  .a3-head h1 { font-size: 25px; }
  .a3-b { font-size: 16.5px; line-height: 1.95; } .a3-lead p:first-child { font-size: 17.5px; }
  .a3-b h2 { font-size: 22px; } .a3-b h3 { font-size: 18.5px; }
  .a3-b .quote { font-size: 18px; padding-left: 16px; }
  .a3-tldr { padding: 18px 14px; }
  .a3-tldr-g, .a3-tldr-g.n3 { grid-template-columns: 1fr; }
  .a3-tldr-g.n3 a { grid-template-columns: 68px minmax(0, 1fr); align-items: center; } .a3-tldr-g.n3 img { width: 68px; height: 68px; }
  .a3-pick-top { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
  .a3-buyw { margin-left: -126px; width: calc(100% + 126px); }
  .a3-pi .no { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; left: 6px; top: 6px; }
  .a3-pick h3 { font-size: 19px; } .a3-one { font-size: 15.5px; } .a3-fit { font-size: 13px; }
  .buyb > a { width: 100%; justify-content: space-between; white-space: nowrap; padding: 0 12px; font-size: 14.5px; }
  .a3-po { grid-template-columns: 1fr; } .a3-po > div { font-size: 15px; }
  .a3-specl { grid-template-columns: 1fr; font-size: 14px; }
  .a3-faq summary { font-size: 16px; } .a3-faq details > div { font-size: 15.5px; }
  .a3-rel-g { grid-template-columns: 1fr; gap: 28px; } .a3-rel h2 { font-size: 22px; } .a3-rel-s { font-size: 13.5px; }
  .a3-rc h3 { font-size: 18px; }
  .a3-next { grid-template-columns: 1fr; } .a3-next img { aspect-ratio: 16 / 9; } .a3-next .nim { order: -1; } .a3-next b { font-size: 19px; }
}
/* 選購指南裡的推薦商品卡（article/gcards.blade.php）：一排小卡，手機左右滑；跟評比的單行按鈕同一套顏色（momo 綠、蝦皮橘） */
.gp { margin: 1.6em 0 2em; }
.gp-aff { font-size: 12.5px; color: var(--ink-3); line-height: 1.7; margin-bottom: 10px; }
.gp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gp-g.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp-g.n1 { grid-template-columns: minmax(0, 340px); }
.gp-c { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 14px; line-height: 1.6; }
.gp-tier { align-self: flex-start; font-size: 13px; font-weight: 700; color: #064c3a; background: var(--brand-50); border-radius: 999px; padding: 2px 10px; }
.gp-im { border-radius: 12px; overflow: hidden; background: #f1f2f4; aspect-ratio: 4 / 3; }
.gp-im img { width: 100%; height: 100%; object-fit: contain; }
.gp-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--brand-700); background: linear-gradient(135deg, #eef7f2, #f6f8f9); }
.gp-ph svg { width: 34px; height: 34px; opacity: .8; }
.gp-ph b { font-size: 15px; letter-spacing: .06em; color: var(--ink-2); }
.gp-md small { display: block; font-size: 12.5px; color: var(--ink-3); }
.gp-md b { display: block; font-size: 17px; font-weight: 900; color: var(--ink); line-height: 1.35; }
.gp-fit { font-size: 14px; color: var(--ink-2); }
.gp .gp-sp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.gp .gp-sp li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); margin: 0; }
.gp-sp span { color: var(--ink-3); font-size: 13px; }
.gp-sp b { margin-left: auto; font-weight: 700; color: var(--ink); }
.gp-sp em { flex-basis: 100%; text-align: right; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.gp-pr { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gp-pr b { font-size: 19px; font-weight: 900; color: var(--ink); }
.gp-pr small { font-size: 12px; color: var(--ink-3); }
.gp-bt { display: flex; flex-direction: column; gap: 6px; }
.gp-bt a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; background: var(--brand); color: #fff !important; font-weight: 700; font-size: 14.5px; }
.gp-bt a:hover { background: var(--brand-700); }
.gp-bt a.ch-shopee { background: #ee4d2d; }
.gp-note { font-size: 11.5px; color: var(--ink-3); text-align: center; }
@media (max-width: 720px) {
  .gp-g, .gp-g.n2, .gp-g.n1 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .gp-g::-webkit-scrollbar { display: none; }
  .gp-c { flex: 0 0 78%; scroll-snap-align: start; }
}
/* 「先講結論」答案框（選購指南；原型 guide-v1／pages-v1.css 第 100～102 行的 .ans；資料 content.answer） */
.a3-ans { border-radius: 18px; background: var(--brand-50); border: 1px solid var(--brand-100); padding: 20px 24px; margin: 22px 0; }
.a3-ans h4 { margin: 0 0 8px; font-size: 14px; color: var(--brand-700); font-weight: 900; letter-spacing: .06em; }
.a3-ans div { font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--ink); }
@media (max-width: 720px) { .a3-ans div { font-size: 16px; } }
/* b4 驗收退回 #14：一句話重點跟購買按鈕之間照原型 21px（手機 19px）；首圖後面不留灰底 */
.a3-pick .buyb { margin-top: 21px; }
@media (max-width: 720px) { .a3-pick .buyb { margin-top: 19px; } }
.a3-hero, .a3-hero figure, .a3-hero picture { background: none; }