@charset "utf-8";
/* ============================================================
   blog.css | yuechen-id.com | Knowledge article / blog layout
   Created 2026-08-12. Follows style.css design tokens:
   gold #d9b766, greys #333/#666/#999/#dbdcdc/#f2f2f2/#f9f9f9,
   fonts inherited from style.css (Poppins + Microsoft JhengHei)
   ============================================================ */

/* --- container --- */
.article{max-width:860px;margin:0 auto;padding:0 24px}
.article-inner{padding:80px 0 40px}

/* --- breadcrumb --- */
.breadcrumb{font-size:13px;color:#999;letter-spacing:.05em;margin-bottom:28px;line-height:1.9}
.breadcrumb ol{list-style:none;margin:0;padding:0}
.breadcrumb li{display:inline}
.breadcrumb li+li:before{content:"/";margin:0 8px;color:#ccc}
.breadcrumb a{color:#999;text-decoration:none;transition:color .3s}
.breadcrumb a:hover{color:#d9b766}

/* --- title + meta --- */
.article-head{border-bottom:1px solid #dbdcdc;padding-bottom:28px;margin-bottom:36px}
.article-cat{display:inline-block;font-size:12px;letter-spacing:.12em;color:#d9b766;border:1px solid #d9b766;padding:4px 12px;margin-bottom:18px}
h1.article-title{font-size:32px;line-height:1.5;color:#333;font-weight:700;letter-spacing:.02em;margin:0 0 18px}
.article-meta{font-size:13px;color:#999;letter-spacing:.05em}
.article-meta span+span:before{content:"\00b7";margin:0 10px;color:#ddd}

/* --- lead --- */
.article-lead{font-size:17px;line-height:2;color:#666;background:#f9f9f9;border-left:3px solid #d9b766;padding:22px 26px;margin:0 0 40px}

/* --- table of contents --- */
.toc{border:1px solid #dbdcdc;padding:26px 30px;margin:0 0 48px;background:#fff}
.toc-title{font-size:14px;letter-spacing:.1em;color:#333;font-weight:700;margin-bottom:16px}
.toc-title:after{content:"";display:block;width:28px;height:2px;background:#d9b766;margin-top:10px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;line-height:1.9;margin-bottom:8px;font-size:15px}
.toc li:before{content:counter(toc,decimal-leading-zero);color:#d9b766;font-size:12px;margin-right:10px;letter-spacing:.05em}
.toc a{color:#666;text-decoration:none;transition:color .3s}
.toc a:hover{color:#d9b766}

/* --- body --- */
.article-body{font-size:16px;line-height:2.1;color:#444;letter-spacing:.03em}
.article-body h2{font-size:24px;line-height:1.6;color:#333;font-weight:700;margin:64px 0 24px;padding-left:16px;border-left:4px solid #d9b766;scroll-margin-top:90px}
.article-body h3{font-size:19px;line-height:1.7;color:#333;font-weight:700;margin:44px 0 16px;scroll-margin-top:90px}
.article-body h3:before{content:"\2014";color:#d9b766;margin-right:10px}
.article-body p{margin:0 0 22px}
.article-body a{color:#a8853c;text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:#d9b766}
.article-body strong{color:#333;font-weight:700}
.article-body ul,.article-body ol{margin:0 0 26px;padding-left:22px}
.article-body li{margin-bottom:10px}
.article-body ul li{list-style:none;position:relative}
.article-body ul li:before{content:"";position:absolute;left:-18px;top:14px;width:6px;height:6px;background:#d9b766;border-radius:50%}
.article-body ol li{list-style:decimal}

/* --- figure --- */
.article-fig{margin:40px 0}
.article-fig img{width:100%;height:auto;display:block}
.article-fig figcaption{font-size:13px;color:#999;margin-top:12px;line-height:1.8;text-align:center}

/* --- callout --- */
.callout{background:#f9f9f9;padding:28px 30px;margin:36px 0;border-top:2px solid #d9b766}
.callout-title{font-size:15px;font-weight:700;color:#333;margin-bottom:12px;letter-spacing:.05em}
.callout p:last-child{margin-bottom:0}

/* --- table --- */
.table-wrap{overflow-x:auto;margin:36px 0;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.article-body th,.article-body td{border:1px solid #dbdcdc;padding:14px 16px;text-align:left;line-height:1.8;vertical-align:top}
.article-body th{background:#f2f2f2;color:#333;font-weight:700;white-space:nowrap}

/* --- FAQ --- */
.faq{margin:64px 0 0}
.faq-item{border-bottom:1px solid #dbdcdc}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-size:17px;font-weight:700;color:#333;line-height:1.7}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:before{content:"Q";color:#d9b766;font-weight:700;margin-right:12px}
.faq-item summary:after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1px solid #999;border-bottom:1px solid #999;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq-item[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.faq-answer{padding:0 0 26px 26px;color:#666;line-height:2.1;font-size:15px}
.faq-answer p:last-child{margin-bottom:0}

/* --- end-of-article CTA --- */
.article-cta{margin:72px 0 0;background:#f9f9f9;color:#333;padding:48px 40px;text-align:center;border-top:2px solid #d9b766}
.article-cta-title{font-size:22px;line-height:1.6;font-weight:700;margin-bottom:14px;letter-spacing:.03em}
.article-cta-text{font-size:15px;line-height:2;color:#666;margin-bottom:28px}
.article-cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.article-cta-btn{display:inline-block;padding:15px 34px;font-size:15px;letter-spacing:.08em;text-decoration:none;transition:all .3s;border:1px solid #d9b766}
.article-cta-btn.primary{background:#d9b766;color:#fff}
.article-cta-btn.primary:hover{background:transparent;color:#a8853c;border-color:#a8853c}
.article-cta-btn.ghost{color:#a8853c;border-color:#a8853c;background:#fff}
.article-cta-btn.ghost:hover{background:#a8853c;color:#fff;border-color:#a8853c}

/* --- related --- */
.related{margin:72px 0 0;border-top:1px solid #dbdcdc;padding-top:44px}
.related-title{font-size:14px;letter-spacing:.1em;color:#333;font-weight:700;margin-bottom:24px}
.related-title:after{content:"";display:block;width:28px;height:2px;background:#d9b766;margin-top:10px}
.related-list{list-style:none;margin:0;padding:0}
.related-list li{border-bottom:1px solid #f2f2f2}
.related-list a{display:block;padding:16px 0;color:#666;text-decoration:none;font-size:15px;line-height:1.8;transition:color .3s}
.related-list a:hover{color:#d9b766}
.related-list a:before{content:"\2192";color:#d9b766;margin-right:10px}

/* --- blog index list --- */
.blog-inner{max-width:1100px;margin:0 auto;padding:90px 24px 40px}
.blog-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px}
.blog-card a{display:block;text-decoration:none;color:inherit}
.blog-card-img{overflow:hidden;background:#f2f2f2;aspect-ratio:16/10}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.blog-card a:hover .blog-card-img img{transform:scale(1.06)}
.blog-card-cat{display:inline-block;font-size:11px;letter-spacing:.12em;color:#d9b766;margin:18px 0 8px}
.blog-card-name{font-size:17px;line-height:1.7;color:#333;font-weight:700;transition:color .3s}
.blog-card a:hover .blog-card-name{color:#d9b766}
.blog-card-desc{font-size:14px;line-height:1.9;color:#999;margin-top:10px}
.blog-card-date{font-size:12px;color:#ccc;letter-spacing:.05em;margin-top:12px}
.blog-empty{text-align:center;color:#999;font-size:15px;line-height:2.2;padding:60px 0}

/* --- responsive --- */
@media screen and (max-width:1024px){
 .blog-list{grid-template-columns:repeat(2,1fr);gap:36px 26px}
}
@media screen and (max-width:767px){
 .article{padding:0 20px}
 .article-inner{padding:56px 0 30px}
 h1.article-title{font-size:24px}
 .article-lead{font-size:15px;padding:18px 20px}
 .toc{padding:20px 22px;margin-bottom:36px}
 .article-body{font-size:15px;line-height:2}
 .article-body h2{font-size:20px;margin:48px 0 20px}
 .article-body h3{font-size:17px;margin:34px 0 14px}
 .article-cta{padding:36px 24px}
 .article-cta-title{font-size:18px}
 .article-cta-btns{flex-direction:column}
 .blog-inner{padding:64px 20px 30px}
 .blog-list{grid-template-columns:1fr;gap:34px}
}