/* Shared styles for setupempf.hk.
   body.post       — rules identical on every article
   body.post.tpl   — main article template (headings, cards, tables, nav)
   body.listing    — /blog/, pagination, topic hubs
   :where() keeps the original specificity. Page-only rules stay inline
   after this file. post-tools.css is separate. Homepage rules stay inline
   because that page uses a different class set. */

/* Reserved ad slots. Ungated so the homepage placeholder stays visible.
   Text before the first marker comment is ignored by load_sheet(). */
.adslot{border:1px dashed #AEB7C2;border-radius:var(--r,12px);background:repeating-linear-gradient(45deg,#FAFBFC,#FAFBFC 10px,#F3F5F8 10px,#F3F5F8 20px);min-height:120px;padding:var(--s3,12px) var(--s4,16px);color:var(--muted,#5B6573);font-size:var(--fs-xs,13px);margin:var(--s6,32px) 0}
.adslot .lbl{display:inline-block;border:1px solid #AEB7C2;border-radius:4px;padding:0 6px;margin-bottom:6px;background:#fff;color:var(--ink,#1A2433);font-weight:700}
.adslot a{color:var(--link,#1E5BB8);font-weight:700}

/* Articles */
/*+ :root */
:where(body.post.tpl) { --empf-orange: #FF9400; --accent-text: #9A5200; --empf-orange-pale: #FFF3E1; --empf-blue: #1D3354; --text-dark: #200400; --text-secondary: #495057; --text-caption: #5B6573; --bg-white: #FFFFFF; --bg-alt: #F7F7F7; --border: #ADB5BD; --border-light: #DDDDDD; --card-radius: 20px; --btn-radius: 28px; --green-wa: #25D366; }

/*+ * */
:where(body.post, body.post *) { margin: 0; padding: 0; box-sizing: border-box; }

/*+ body */
:where(body.post.tpl) { font-family: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Heiti TC", "Droid Sans Fallback", sans-serif; font-size: 17px; line-height: 1.8; color: var(--text-dark); background: var(--bg-white); }

/*+ .nav */
:where(body.post.tpl) .nav { position: sticky; top: 0; z-index: 100; background: var(--bg-white); border-bottom: 1px solid var(--border-light); padding: 14px 0; }

/*+ .nav-inner */
:where(body.post.tpl) .nav-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/*+ .nav-logo */
:where(body.post) .nav-logo { text-decoration: none; }

/*+ .nav-logo img */
:where(body.post) .nav-logo img { height: 36px; }

/*+ .nav-links */
:where(body.post) .nav-links { display: flex; gap: 4px 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/*+ .nav-links a */
:where(body.post.tpl) .nav-links a { text-decoration: none; font-size: 15px; color: var(--text-secondary); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; white-space: nowrap; }

/*+ .nav-links a:hover */
:where(body.post) .nav-links a:hover { color: var(--accent-text); }

/*+ .nav-links a:focus-visible */
:where(body.post) .nav-links a:focus-visible { outline: 2px solid var(--empf-blue); outline-offset: 2px; }

/*+ .nav-links a[aria-current="page"] */
:where(body.post) .nav-links a[aria-current="page"] { color: var(--accent-text); font-weight: 700; }

/*+ .nav-cta */
:where(body.post.tpl) .nav-cta { background: var(--empf-blue); color: white !important; padding: 8px 18px; border-radius: var(--btn-radius); font-size: 14px !important; }

/*+ .article-wrap */
:where(body.post.tpl) .article-wrap { max-width: 800px; margin: 0 auto; padding: 40px 24px 60px; }

/*+ .article-meta */
:where(body.post.tpl) .article-meta { font-size: 14px; color: var(--text-caption); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/*+ h1.article-title */
:where(body.post.tpl) h1.article-title { font-size: 28px; font-weight: 700; line-height: 1.4; color: var(--text-dark); margin-bottom: 16px; }

/*+ article.article h2 */
:where(body.post.tpl) article.article h2 { font-size: 22px; font-weight: 700; color: var(--empf-blue); margin: 36px 0 14px; border-bottom: 2px solid var(--empf-orange-pale); padding-bottom: 8px; }

/*+ article.article h3 */
:where(body.post.tpl) article.article h3 { font-size: 16px; font-weight: 700; color: var(--accent-text); margin: 20px 0 6px; }

/*+ article.article p */
:where(body.post.tpl) article.article p { font-size: 17px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 16px; }

/*+ article.article ul, article.article ol */
:where(body.post.tpl) article.article ul,
:where(body.post.tpl) article.article ol { padding-left: 24px; margin-bottom: 16px; }

/*+ article.article li */
:where(body.post.tpl) article.article li { font-size: 17px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 6px; }

/*+ article.article strong */
:where(body.post.tpl) article.article strong { color: var(--text-dark); }

/*+ .highlight-box */
:where(body.post.tpl) .highlight-box { border-radius: 14px; padding: 18px 22px; margin: 24px 0; }

/*+ .highlight-box.info */
:where(body.post.tpl) .highlight-box.info { background: #EBF3FF; border-left: 4px solid var(--empf-blue); }

/*+ .highlight-box.alert */
:where(body.post.tpl) .highlight-box.alert { background: #FFF0F0; border-left: 4px solid #E53E3E; }

/*+ .highlight-box.success */
:where(body.post.tpl) .highlight-box.success { background: #F0FFF4; border-left: 4px solid #38A169; }

/*+ .highlight-box p */
:where(body.post.tpl) .highlight-box p { margin-bottom: 0; }

/*+ .step-box */
:where(body.post.tpl) .step-box { background: var(--bg-alt); border-radius: 14px; padding: 20px 24px; margin: 20px 0; }

/*+ .step-box h3 */
:where(body.post.tpl) .step-box h3 { color: var(--accent-text); margin-bottom: 10px; }

/*+ .data-table */
:where(body.post.tpl) .data-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }

/*+ .data-table th */
:where(body.post.tpl) .data-table th { background: var(--empf-blue); color: white; padding: 10px 14px; text-align: left; font-weight: 600; }

/*+ .data-table td */
:where(body.post.tpl) .data-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }

/*+ .data-table tr:nth-child(even) td */
:where(body.post.tpl) .data-table tr:nth-child(even) td { background: var(--bg-alt); }

/*+ .data-table .red */
:where(body.post.tpl) .data-table .red { color: #E53E3E; font-weight: 700; }

/*+ .data-table .green */
:where(body.post.tpl) .data-table .green { color: #38A169; font-weight: 700; }

/*+ .data-table .orange */
:where(body.post.tpl) .data-table .orange { color: var(--accent-text); font-weight: 700; }

/*+ .faq-section */
:where(body.post.tpl) .faq-section { margin-top: 40px; }

/*+ .faq-item */
:where(body.post.tpl) .faq-item { border: 1px solid var(--border-light); border-radius: 14px; padding: 0; margin-bottom: 16px; }

/*+ .faq-item h3 */
:where(body.post.tpl) .faq-item h3 { color: var(--text-dark); font-size: 16px; margin-bottom: 10px; }

/*+ .faq-item p */
:where(body.post.tpl) .faq-item p { margin-bottom: 0; font-size: 16px; }

/*+ .stat-row */
:where(body.post.tpl) .stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0; }

/*+ .stat-card */
:where(body.post.tpl) .stat-card { flex: 1; min-width: 130px; background: var(--bg-alt); border-radius: 14px; padding: 18px 16px; text-align: center; }

/*+ .stat-card .stat-val */
:where(body.post.tpl) .stat-card .stat-val { font-size: 26px; font-weight: 700; margin-bottom: 4px; }

/*+ .stat-card .stat-val.red */
:where(body.post.tpl) .stat-card .stat-val.red { color: #E53E3E; }

/*+ .stat-card .stat-val.green */
:where(body.post.tpl) .stat-card .stat-val.green { color: #38A169; }

/*+ .stat-card .stat-val.orange */
:where(body.post.tpl) .stat-card .stat-val.orange { color: var(--accent-text); }

/*+ .stat-card .stat-label */
:where(body.post.tpl) .stat-card .stat-label { font-size: 13px; color: var(--text-caption); }

/*+ .cta-box */
:where(body.post.tpl) .cta-box { background: var(--empf-blue); border-radius: 20px; padding: 32px 28px; text-align: center; margin: 40px 0; }

/*+ article.article .cta-box h3 */
:where(body.post.tpl) article.article .cta-box h3 { color: white; font-size: 22px; font-weight: 700; margin: 0 0 10px; }

/*+ .cta-box p */
:where(body.post.tpl) .cta-box p { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 22px; }

/*+ .cta-btn */
:where(body.post.tpl) .cta-btn { display: inline-block; background: var(--empf-orange); color: #1A2433; text-decoration: none; padding: 14px 28px; border-radius: var(--btn-radius); font-size: 16px; font-weight: 600; }

/*+ .breadcrumb */
:where(body.post.tpl) .breadcrumb { font-size: 13px; color: var(--text-caption); margin-bottom: 24px; }

/*+ .breadcrumb a */
:where(body.post.tpl) .breadcrumb a { color: var(--text-caption); text-decoration: none; }

/*+ .breadcrumb a:hover */
:where(body.post.tpl) .breadcrumb a:hover { color: var(--accent-text); }

/*+ .footer */
:where(body.post) .footer { padding: 32px 24px; background: var(--bg-alt); border-top: 1px solid var(--border-light); text-align: center; }

/*+ .footer p */
:where(body.post.tpl) .footer p { font-size: 14px; color: var(--text-caption); }

/*+ @media (max-width: 600px) || h1.article-title */
@media (max-width: 600px) {
  :where(body.post.tpl) h1.article-title { font-size: 22px; }
}

/*+ @media (max-width: 600px) || article.article h2 */
@media (max-width: 600px) {
  :where(body.post.tpl) article.article h2 { font-size: 19px; }
}

/*+ @media (max-width: 600px) || .cta-box */
@media (max-width: 600px) {
  :where(body.post.tpl) .cta-box { padding: 24px 20px; }
}

/*+ @media (max-width: 600px) || .stat-card .stat-val */
@media (max-width: 600px) {
  :where(body.post.tpl) .stat-card .stat-val { font-size: 20px; }
}

/*+ .cookie-banner */
:where(body.post) .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1D3354; color: white; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.35s ease; }

/*+ .cookie-banner.show */
:where(body.post) .cookie-banner.show { transform: translateY(0); }

/*+ .cookie-banner p */
:where(body.post) .cookie-banner p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0; flex: 1; min-width: 200px; }

/*+ .cookie-banner a */
:where(body.post) .cookie-banner a { color: #FF9400; text-decoration: underline; }

/*+ .cookie-banner-btns */
:where(body.post) .cookie-banner-btns { display: flex; gap: 10px; flex-shrink: 0; }

/*+ .cookie-accept */
:where(body.post) .cookie-accept { background: #FF9400; color: #1A2433; border: none; padding: 9px 20px; border-radius: 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }

/*+ .cookie-decline */
:where(body.post) .cookie-decline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); padding: 9px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; font-family: inherit; }

/*+ .cookie-decline:hover */
:where(body.post) .cookie-decline:hover { color: white; border-color: white; }

/*+ .related */
:where(body.post) .related { margin:48px 0 24px;padding:24px;background:var(--bg-alt);border-radius:var(--card-radius,20px);border-left:4px solid var(--empf-orange) }

/*+ article.article .related h3 */
:where(body.post.tpl) article.article .related h3 { font-size:20px;font-weight:700;margin:0 0 16px;color:var(--text-dark) }

/*+ .related ul */
:where(body.post) .related ul { list-style:none;padding:0;margin:0 }

/*+ .related li */
:where(body.post) .related li { margin-bottom:12px }

/*+ .related li:last-child */
:where(body.post) .related li:last-child { margin-bottom:0 }

/*+ .related a */
:where(body.post) .related a { color: var(--accent-text);text-decoration:none;font-weight:700 }

/*+ .tbl */
:where(body.post.tpl) .tbl { margin: 0 0 24px; border: 1px solid var(--border-light); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; max-width: 100%; }

/*+ .tbl table */
:where(body.post.tpl) .tbl table { border-collapse: collapse; width: 100%; min-width: 520px; margin: 0; border-radius: 0; box-shadow: none; overflow: visible; }

/*+ .tbl.narrow table */
:where(body.post.tpl) .tbl.narrow table { min-width: 0; }

/*+ .tbl th */
:where(body.post.tpl) .tbl th { background: var(--empf-blue); color: #fff; text-align: left; padding: 10px 12px; font-weight: 700; white-space: nowrap; }

/*+ .tbl td */
:where(body.post.tpl) .tbl td { padding: 10px 12px; border-top: 1px solid var(--border-light); border-bottom: 0; vertical-align: top; }

/*+ .tbl th, .tbl td */
:where(body.post.tpl) .tbl th,
:where(body.post.tpl) .tbl td { font-size: 14px; line-height: 1.6; }

/*+ .tbl tr:nth-child(even) td */
:where(body.post.tpl) .tbl tr:nth-child(even) td { background: #FAFBFC; }

/*+ .tbl td:first-child, .tbl th:first-child */
:where(body.post.tpl) .tbl td:first-child,
:where(body.post.tpl) .tbl th:first-child { position: sticky; left: 0; z-index: 1; }

/*+ .tbl th:first-child */
:where(body.post.tpl) .tbl th:first-child { z-index: 2; background: var(--empf-blue); }

/*+ .tbl td:first-child */
:where(body.post.tpl) .tbl td:first-child { background: #fff; box-shadow: 1px 0 0 var(--border-light); }

/*+ .tbl td:first-child:not(.red):not(.green):not(.orange):not(.red-cell):not(.green-cell):not(.orange-cell):not(.gain):not(.loss):not(.highlight-cell) */
:where(body.post.tpl) .tbl td:first-child:not(.red):not(.green):not(.orange):not(.red-cell):not(.green-cell):not(.orange-cell):not(.gain):not(.loss):not(.highlight-cell) { font-weight: 600; color: var(--text-dark); }

/*+ .tbl tr:nth-child(even) td:first-child */
:where(body.post.tpl) .tbl tr:nth-child(even) td:first-child { background: #FAFBFC; }

/*+ article.article p.tbl-hint, .article p.tbl-hint, p.tbl-hint */
:where(body.post.tpl) article.article p.tbl-hint,
:where(body.post.tpl) .article p.tbl-hint,
:where(body.post.tpl) p.tbl-hint { font-size: 13px; color: var(--text-caption); margin: 4px 0 8px; line-height: 1.5; }

/*+ @media (min-width: 700px) || .tbl-hint */
@media (min-width: 700px) {
  :where(body.post.tpl) .tbl-hint { display: none; }
}

/*+ .about-site */
:where(body.post) .about-site { margin:36px 0 8px;padding:20px 22px;background:var(--bg-alt);border-radius:14px;border:1px solid var(--border-light);border-left:4px solid var(--empf-blue) }

/*+ .about-site h2,.article .about-site h2,article.article .about-site h2 */
:where(body.post) .about-site h2,
:where(body.post) .article .about-site h2,
:where(body.post) article.article .about-site h2 { font-size:18px;font-weight:700;color:var(--empf-blue);margin:0 0 10px;padding:0;border:0;line-height:1.4 }

/*+ .about-site p,.article .about-site p,article.article .about-site p */
:where(body.post) .about-site p,
:where(body.post) .article .about-site p,
:where(body.post) article.article .about-site p { font-size:15px;line-height:1.75;color:var(--text-secondary);margin:0 0 10px }

/*+ .about-site p:last-child,.article .about-site p:last-child,article.article .about-site p:last-child */
:where(body.post) .about-site p:last-child,
:where(body.post) .article .about-site p:last-child,
:where(body.post) article.article .about-site p:last-child { margin-bottom:0 }

/*+ .about-site a */
:where(body.post) .about-site a { color:var(--empf-blue);font-weight:700;text-decoration:underline }

/*+ details.faq-item */
:where(body.post.tpl) details.faq-item { --faq-pad: 22px; }

/*+ details.faq-item summary */
:where(body.post.tpl) details.faq-item summary { cursor: pointer; list-style: none; position: relative; display: block; min-height: 44px; padding: 14px calc(var(--faq-pad, 22px) + 28px) 14px var(--faq-pad, 22px); }

/*+ details.faq-item summary::-webkit-details-marker */
:where(body.post) details.faq-item summary::-webkit-details-marker { display: none; }

/*+ details.faq-item summary::marker */
:where(body.post) details.faq-item summary::marker { content: ""; }

/*+ details.faq-item summary::after */
:where(body.post) details.faq-item summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--text-caption, #5B6573); border-bottom: 2px solid var(--text-caption, #5B6573); transform: translateY(-70%) rotate(45deg); }

/*+ details.faq-item[open] summary::after */
:where(body.post) details.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }

/*+ details.faq-item summary:focus-visible */
:where(body.post) details.faq-item summary:focus-visible { outline: 2px solid var(--empf-blue); outline-offset: 2px; border-radius: 4px; }

/*+ details.faq-item summary h3 */
:where(body.post) details.faq-item summary h3 { margin: 0; }

/*+ details.faq-item > :not(summary) */
:where(body.post.tpl) details.faq-item > :not(summary) { padding-left: var(--faq-pad, 22px); padding-right: var(--faq-pad, 22px); }

/*+ details.faq-item[open] */
:where(body.post) details.faq-item[open] { padding-bottom: 16px; }

/*+ article.article details.faq-item > p:last-child, .article details.faq-item > p:last-child, details.faq-item > p:last-child */
:where(body.post) article.article details.faq-item > p:last-child,
:where(body.post) .article details.faq-item > p:last-child,
:where(body.post) details.faq-item > p:last-child { margin-bottom: 0; }

/*+ article.article h2, .article h2 */
:where(body.post) article.article h2,
:where(body.post) .article h2 { scroll-margin-top: 120px; }

/*+ .key-points */
:where(body.post) .key-points { background: var(--empf-orange-pale, #FFF3E1); border: 1px solid var(--border-light); border-left: 4px solid var(--empf-blue); border-radius: 14px; padding: 16px 18px 12px; margin: 4px 0 20px; }

/*+ article.article .key-points-title, .article .key-points-title */
:where(body.post) article.article .key-points-title,
:where(body.post) .article .key-points-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--accent-text); }

/*+ article.article .key-points ul, .article .key-points ul */
:where(body.post) article.article .key-points ul,
:where(body.post) .article .key-points ul { margin: 0; padding-left: 1.25em; }

/*+ article.article .key-points li, .article .key-points li */
:where(body.post) article.article .key-points li,
:where(body.post) .article .key-points li { margin: 0 0 6px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

/*+ article.article .key-points li:last-child, .article .key-points li:last-child */
:where(body.post) article.article .key-points li:last-child,
:where(body.post) .article .key-points li:last-child { margin-bottom: 0; }

/*+ .article-toc */
:where(body.post) .article-toc { margin: 0 0 28px; border: 1px solid var(--border-light); border-radius: 14px; background: var(--bg-alt, #F7F7F7); }

/*+ .article-toc summary */
:where(body.post) .article-toc summary { cursor: pointer; list-style: none; position: relative; display: block; min-height: 44px; padding: 12px 44px 12px 16px; font-weight: 700; color: var(--empf-blue); }

/*+ .article-toc summary::-webkit-details-marker */
:where(body.post) .article-toc summary::-webkit-details-marker { display: none; }

/*+ .article-toc summary::marker */
:where(body.post) .article-toc summary::marker { content: ""; }

/*+ .article-toc summary::after */
:where(body.post) .article-toc summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--text-caption, #5B6573); border-bottom: 2px solid var(--text-caption, #5B6573); transform: translateY(-70%) rotate(45deg); }

/*+ .article-toc details[open] summary::after */
:where(body.post) .article-toc details[open] summary::after { transform: translateY(-30%) rotate(225deg); }

/*+ .article-toc summary:focus-visible */
:where(body.post) .article-toc summary:focus-visible { outline: 2px solid var(--empf-blue); outline-offset: 2px; border-radius: 4px; }

/*+ article.article .article-toc ol, .article .article-toc ol */
:where(body.post) article.article .article-toc ol,
:where(body.post) .article .article-toc ol { margin: 0; padding: 0 16px 14px 2.2em; }

/*+ article.article .article-toc li, .article .article-toc li */
:where(body.post) article.article .article-toc li,
:where(body.post) .article .article-toc li { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/*+ .article-toc a */
:where(body.post) .article-toc a { display: block; min-height: 44px; padding: 10px 0; color: var(--accent-text); font-weight: 600; text-decoration: none; }

/*+ .article-toc a:hover */
:where(body.post) .article-toc a:hover { text-decoration: underline; }

/*+ .article-toc a:focus-visible */
:where(body.post) .article-toc a:focus-visible { outline: 2px solid var(--empf-blue); outline-offset: 2px; }

/*+ @media (min-width: 1100px) || .article-wrap */
@media (min-width: 1100px) {
  :where(body.post) .article-wrap { max-width: 1080px; }
}

/*+ @media (min-width: 1100px) || article.article */
@media (min-width: 1100px) {
  :where(body.post) article.article { max-width: 1080px; }
}

/*+ @media (min-width: 1100px) || .article-layout */
@media (min-width: 1100px) {
  :where(body.post) .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; column-gap: 28px; align-items: start; }
}

/*+ @media (min-width: 1100px) || .article-lead, .article-body */
@media (min-width: 1100px) {
  :where(body.post) .article-lead,
:where(body.post) .article-body { grid-column: 1; min-width: 0; }
}

/*+ @media (min-width: 1100px) || .article-toc */
@media (min-width: 1100px) {
  :where(body.post) .article-toc { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 96px); overflow: auto; margin: 0; z-index: 2; }
}

/*+ @media (min-width: 1100px) || .article-toc details[open] > summary */
@media (min-width: 1100px) {
  :where(body.post) .article-toc details[open] > summary { pointer-events: none; cursor: default; padding-right: 16px; }
}

/*+ @media (min-width: 1100px) || .article-toc details[open] > summary::after */
@media (min-width: 1100px) {
  :where(body.post) .article-toc details[open] > summary::after { content: none; }
}

/* Blog index, pagination, topic hubs */
/*+ :root */
:where(body.listing) { --navy: #1D3354; --ink: #1A2433; --text: #2B3442; --muted: #5B6573; --accent: #FF9400; --accent-text: #9A5200; --pale: #FFF3E1; --link: #1E5BB8; --line: #DDDDDD; --bg: #fff; --bg-alt: #F7F7F7; }

/*+ * */
:where(body.listing, body.listing *) { margin: 0; padding: 0; box-sizing: border-box; }

/*+ body */
:where(body.listing) { font-family: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", "Heiti TC", sans-serif; font-size: 16px; color: var(--ink); background: var(--bg); line-height: 1.5; }

/*+ a:focus-visible, button:focus-visible */
:where(body.listing) a:focus-visible,
:where(body.listing) button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/*+ .nav */
:where(body.listing) .nav { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }

/*+ .nav-inner */
:where(body.listing) .nav-inner { max-width: 880px; margin: 0 auto; padding: 8px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }

/*+ .nav-logo img */
:where(body.listing) .nav-logo img { height: 36px; width: auto; display: block; }

/*+ .nav-logo picture */
:where(body.listing) .nav-logo picture { display: block; line-height: 0; }

/*+ .nav-links */
:where(body.listing) .nav-links { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }

/*+ .nav-links a */
:where(body.listing) .nav-links a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }

/*+ .nav-links a[aria-current="page"] */
:where(body.listing) .nav-links a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--accent); }

/*+ .wrap */
:where(body.listing) .wrap { max-width: 880px; margin: 0 auto; padding: 28px 24px 64px; }

/*+ .crumbs */
:where(body.listing) .crumbs { font-size: 14px; color: var(--muted); margin-bottom: 12px; }

/*+ .crumbs a */
:where(body.listing) .crumbs a { color: var(--link); font-weight: 700; }

/*+ h1 */
:where(body.listing) h1 { font-size: 32px; line-height: 1.3; font-weight: 700; color: var(--navy); margin-bottom: 8px; }

/*+ .lead */
:where(body.listing) .lead { color: var(--text); font-size: 16px; line-height: 1.6; margin-bottom: 8px; }

/*+ .kicker */
:where(body.listing) .kicker { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

/*+ .chips */
:where(body.listing) .chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 16px; margin: 0 -24px 8px; padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }

/*+ .chip */
:where(body.listing) .chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--accent-text); font-weight: 700; font-size: 14px; text-decoration: none; }

/*+ .chip[aria-current="page"] */
:where(body.listing) .chip[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/*+ .post-list */
:where(body.listing) .post-list { list-style: none; display: grid; gap: 16px; margin-top: 8px; }

/*+ .post-card */
:where(body.listing) .post-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; }

/*+ .post-card picture */
:where(body.listing) .post-card picture { display: block; background: var(--bg-alt); }

/*+ .post-card img */
:where(body.listing) .post-card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }

/*+ .post-card .card-body */
:where(body.listing) .post-card .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px 16px; flex: 1; min-width: 0; }

/*+ .post-card:hover .title */
:where(body.listing) .post-card:hover .title { text-decoration: underline; }

/*+ .tag */
:where(body.listing) .tag { background: var(--pale); color: var(--accent-text); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; line-height: 1.3; }

/*+ .title */
:where(body.listing) .title { font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; }

/*+ .excerpt */
:where(body.listing) .excerpt { color: var(--text); font-size: 14px; line-height: 1.6; }

/*+ .when */
:where(body.listing) .when { margin-top: auto; color: var(--muted); font-size: 13px; }

/*+ .when-label */
:where(body.listing) .when-label { font-size: 12px; }

/*+ .pager */
:where(body.listing) .pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; }

/*+ .pager a */
:where(body.listing) .pager a { min-height: 44px; min-width: 44px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; color: var(--link); font-weight: 700; text-decoration: none; }

/*+ .pager a[aria-current="page"] */
:where(body.listing) .pager a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/*+ .footer */
:where(body.listing) .footer { padding: 32px 24px; background: var(--bg-alt); border-top: 1px solid var(--line); text-align: center; }

/*+ .footer p */
:where(body.listing) .footer p { font-size: 14px; color: var(--muted); line-height: 1.6; }

/*+ .footer a */
:where(body.listing) .footer a { color: var(--muted); }

/*+ .cookie-banner */
:where(body.listing) .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #1D3354; color: white; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.35s ease; }

/*+ .cookie-banner.show */
:where(body.listing) .cookie-banner.show { transform: translateY(0); }

/*+ .cookie-banner p */
:where(body.listing) .cookie-banner p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 0; flex: 1; min-width: 200px; }

/*+ .cookie-banner a */
:where(body.listing) .cookie-banner a { color: #FF9400; text-decoration: underline; }

/*+ .cookie-banner-btns */
:where(body.listing) .cookie-banner-btns { display: flex; gap: 10px; flex-shrink: 0; }

/*+ .cookie-accept */
:where(body.listing) .cookie-accept { background: #FF9400; color: #1A2433; border: none; padding: 9px 20px; border-radius: 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px; }

/*+ .cookie-decline */
:where(body.listing) .cookie-decline { background: transparent; color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.3); padding: 9px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; font-family: inherit; min-height: 44px; }

/*+ @media (min-width: 720px) || .post-list */
@media (min-width: 720px) {
  :where(body.listing) .post-list { grid-template-columns: 1fr 1fr; }
}

/*+ @media (max-width: 640px) || h1 */
@media (max-width: 640px) {
  :where(body.listing) h1 { font-size: 26px; }
}

/*+ @media (max-width: 640px) || .title */
@media (max-width: 640px) {
  :where(body.listing) .title { font-size: 16px; }
}