/*===========================================================================
  blog_article.css  —  文章內頁 vocus（方格子）單欄閱讀版
  乾淨置中、作者資訊列、標籤、分享列、上下篇、返回
===========================================================================*/

:root{
	--va-accent:  #007AB0;
	--va-accent2: #00A6E0;
	--va-ink:     #15293a;
	--va-ink-soft:#3a4f63;
	--va-muted:   #6b8298;
	--va-line:    #d9e7f1;
	--va-soft:    #e6f3fa;
}

.vc_read{ max-width:840px; margin:0 auto; padding:34px 24px 84px; }
.vc_post{
	max-width:840px;
	margin:0 auto;
	background:#fff;
	border:1px solid var( --va-line );
	border-radius:16px;
	box-shadow:0 6px 28px -16px rgba(16,42,67,.20);
	padding:48px 56px 52px;
}

/*---------- 麵包屑 ----------*/
.vc_crumb{ display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 28px; font-size:13px; }
.vc_crumb li span{ color:var( --va-ink-soft ); }
.vc_crumb li{ color:var( --va-muted ); }
.vc_crumb li + li:before{ content:'/'; padding:0 9px; color:#c5cad0; }
.vc_crumb a{ color:var( --va-muted ); text-decoration:none; transition:color .15s; }
.vc_crumb a:hover{ color:var( --va-accent ); }

/*---------- 標頭 ----------*/
.vc_post_cat{ font-size:14px; font-weight:700; letter-spacing:.5px; color:var( --va-accent ); margin-bottom:15px; }
.vc_post_cat a{ color:inherit; text-decoration:none; }
.vc_post_cat a:hover{ text-decoration:underline; }
.vc_post_title{
	font-family:'Noto Sans TC', sans-serif;
	font-size:37px;
	font-weight:800;
	line-height:1.42;
	letter-spacing:.5px;
	color:var( --va-ink );
	margin:0 0 28px;
}

/*---------- 作者列 ----------*/
.vc_post_author{
	display:flex;
	align-items:center;
	gap:13px;
	padding-bottom:28px;
	margin-bottom:32px;
	border-bottom:1px solid var( --va-line );
}
.vc_avatar{
	width:48px; height:48px;
	border-radius:50%;
	background:linear-gradient(135deg, #007AB0, #00A6E0);
	color:#fff;
	font-size:20px; font-weight:700;
	display:flex; align-items:center; justify-content:center;
	flex-shrink:0;
}
.vc_author_name{ font-size:15.5px; font-weight:700; color:var( --va-ink ); }
.vc_author_meta{ font-size:13px; color:var( --va-muted ); margin-top:3px; }

/*---------- 封面 ----------*/
.vc_cover{ border-radius:14px; overflow:hidden; margin:0 0 36px; background:var( --va-soft ); }
.vc_cover img{ display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; }

/*===========================================================================
  內文排版
===========================================================================*/
.vc_body{ font-size:18px; line-height:1.95; color:#1a2027; letter-spacing:.2px; word-break:break-word; }
.vc_body p{ margin:0 0 1.5em; }
.vc_body img{ display:block; max-width:100%; height:auto; margin:30px auto; border-radius:10px; }
.vc_body h2{ font-size:25px; font-weight:800; line-height:1.5; margin:1.9em 0 .7em; color:var( --va-ink ); }
.vc_body h3{ font-size:20px; font-weight:700; line-height:1.55; margin:1.5em 0 .55em; color:var( --va-ink ); }
.vc_body h4{ font-size:18px; font-weight:700; margin:1.3em 0 .5em; color:var( --va-ink-soft ); }
.vc_body ul, .vc_body ol{ margin:0 0 1.5em; padding-left:1.5em; }
.vc_body ul li{ list-style:disc; margin:.4em 0; }
.vc_body ol li{ list-style:decimal; margin:.4em 0; }
.vc_body a{ color:var( --va-accent ) !important; text-decoration:none; border-bottom:1px solid rgba(0,122,176,.35); transition:all .15s; }
.vc_body a:hover{ border-bottom-color:var( --va-accent2 ); }
.vc_body blockquote{ margin:1.7em 0; padding:14px 24px; background:var( --va-soft ); border-left:4px solid var( --va-accent2 ); border-radius:0 10px 10px 0; color:var( --va-ink-soft ); }
.vc_body hr{ border:0; border-top:1px solid var( --va-line ); margin:2.4em 0; }
.vc_body table{ width:100%; border-collapse:collapse; margin:1.7em 0; font-size:16px; }
.vc_body th, .vc_body td{ border:1px solid var( --va-line ); padding:10px 14px; text-align:left; }
.vc_body th{ background:var( --va-soft ); font-weight:700; }
.vc_body iframe{ max-width:100%; border-radius:10px; margin:20px 0; }

/*---------- 標籤 ----------*/
.vc_tags{ display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 0; }
.vc_tag{
	display:inline-block;
	padding:7px 17px;
	background:#eef5fb;
	color:var( --va-accent );
	border-radius:999px;
	font-size:14px; font-weight:500;
	text-decoration:none;
	transition:all .15s;
}
.vc_tag:hover{ background:var( --va-accent ); color:#fff; }

/*---------- 分享列 ----------*/
.vc_sharebar{
	display:flex;
	align-items:center;
	gap:18px;
	margin:30px 0 0;
	padding:20px 0;
	border-top:1px solid var( --va-line );
	border-bottom:1px solid var( --va-line );
}
.vc_sharebar_label{ font-size:14px; font-weight:700; color:var( --va-ink ); }
.vc_sharebar .share_block{ margin:0 !important; }
.vc_sharebar .shareArea_pos{ display:flex; gap:4px; margin:0; }
.vc_sharebar .shareBtnPublic{ font-size:20px !important; color:var( --va-muted ) !important; margin-right:6px; }
.vc_sharebar div[style*='clear']{ display:none !important; }

/*---------- 上一篇 / 下一篇 ----------*/
.vc_pn{ display:flex; gap:16px; margin:36px 0 0; }
.vc_pn_item{
	flex:1; min-width:0;
	display:flex; flex-direction:column; gap:8px;
	padding:18px 20px;
	border:1px solid var( --va-line );
	border-radius:14px;
	text-decoration:none;
	transition:all .15s;
}
a.vc_pn_item:hover{ border-color:var( --va-accent ); background:var( --va-soft ); }
.vc_pn_right{ text-align:right; align-items:flex-end; }
.vc_pn_dir{ font-size:12.5px; font-weight:700; letter-spacing:.5px; color:var( --va-muted ); }
.vc_pn_t{
	font-size:15px; font-weight:600; line-height:1.5; color:var( --va-ink );
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vc_pn_empty{ flex:1; border:0 !important; background:none !important; }

/*---------- 返回 ----------*/
.vc_back{ text-align:center; margin:42px 0 0; }
.vc_back a{
	display:inline-flex; align-items:center; gap:6px;
	padding:11px 28px;
	border:1px solid #d8dde2;
	border-radius:999px;
	color:var( --va-ink-soft );
	font-size:14px; letter-spacing:1px;
	text-decoration:none;
	transition:all .15s;
}
.vc_back a:hover{ border-color:var( --va-accent ); color:var( --va-accent ); }

/*---------- 常見問題 FAQ（AEO） ----------*/
.vc_faq{
	margin:44px 0 0;
	padding:28px 30px 24px;
	border:1px solid var( --va-line );
	border-radius:14px;
	background:linear-gradient( 180deg, #f7fbfe 0%, #ffffff 100% );
}
.vc_faq_title{
	font-size:22px;
	font-weight:800;
	line-height:1.4;
	color:var( --va-ink );
	margin:0 0 16px;
	padding-left:13px;
	border-left:4px solid var( --va-accent );
}
.vc_faq_list{ display:flex; flex-direction:column; gap:10px; }
.vc_faq_item{
	border:1px solid var( --va-line );
	border-radius:10px;
	background:#fff;
	overflow:hidden;
	transition:border-color .15s, box-shadow .15s;
}
.vc_faq_item.is_open{
	border-color:var( --va-accent );
	box-shadow:0 4px 18px -12px rgba(16,42,67,.35);
}
.vc_faq_q{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:14px;
	width:100%;
	padding:15px 18px;
	border:0;
	background:none;
	text-align:left;
	cursor:pointer;
	font-family:inherit;
}
.vc_faq_q:hover{ background:var( --va-soft ); }
.vc_faq_qtext{
	flex:1;
	font-size:16.5px;
	font-weight:700;
	line-height:1.6;
	color:var( --va-ink );
}
.vc_faq_arrow{
	flex:0 0 auto;
	margin-top:4px;
	font-size:15px;
	color:var( --va-muted );
	transition:transform .2s;
}
.vc_faq_item.is_open .vc_faq_arrow{ transform:rotate(180deg); color:var( --va-accent ); }
/* 收合僅靠高度，內容仍留在 DOM 中，爬蟲與 AI 讀得到 */
.vc_faq_a{
	display:grid;
	grid-template-rows:0fr;
	transition:grid-template-rows .22s ease;
}
.vc_faq_item.is_open .vc_faq_a{ grid-template-rows:1fr; }
.vc_faq_atext{
	overflow:hidden;
	font-size:16px;
	line-height:1.85;
	color:var( --va-ink-soft );
	padding:0 18px;
}
.vc_faq_item.is_open .vc_faq_atext{ padding:0 18px 17px; }

@media (max-width:680px){
	.vc_faq{ padding:22px 18px 18px; }
	.vc_faq_title{ font-size:20px; }
	.vc_faq_qtext{ font-size:15.5px; }
	.vc_faq_atext{ font-size:15.5px; }
}

/*---------- 響應式 ----------*/
@media (max-width:680px){
	.vc_read{ padding:16px 12px 50px; }
	.vc_post{ padding:26px 20px 30px; border-radius:12px; }
	.vc_post_title{ font-size:27px; }
	.vc_body{ font-size:17px; line-height:1.88; }
	.vc_body h2{ font-size:22px; }
	.vc_pn{ flex-direction:column; }
	.vc_pn_right{ text-align:left; align-items:flex-start; }
}

/*===========================================================================
  SEO / AEO 補強（2026.09.13）
===========================================================================*/
/*---------- 本文重點（AEO：答案優先） ----------*/
.vc_summary{
	margin:0 0 30px;
	padding:20px 24px 16px;
	border:1px solid #cfe3ef;
	border-left:4px solid var( --va-accent );
	border-radius:12px;
	background:linear-gradient( 180deg, #f3f9fd 0%, #ffffff 100% );
}
.vc_summary_t{
	display:flex; align-items:center; gap:8px;
	font-size:15px; font-weight:800; letter-spacing:1px;
	color:var( --va-accent );
	margin-bottom:10px;
}
.vc_summary_list{ margin:0; padding:0 0 0 1.3em; }
.vc_summary_list li{ list-style:disc; font-size:16.5px; line-height:1.8; color:var( --va-ink ); margin:4px 0; }
.vc_summary_list li::marker{ color:var( --va-accent2 ); }

/*---------- 文章目錄 ----------*/
.vc_toc{
	margin:0 0 30px;
	padding:16px 22px 12px;
	border:1px dashed var( --va-line );
	border-radius:12px;
	background:#fafcfe;
}
.vc_toc_t{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; letter-spacing:1px; color:var( --va-ink-soft ); margin-bottom:8px; }
.vc_toc .catalog_h2item{ margin:6px 0; }
.vc_toc .catalog_h3item{ margin:4px 0 4px 18px; }
.vc_toc a.a_flex{ display:flex; gap:6px; color:var( --va-ink-soft ); text-decoration:none; font-size:15px; line-height:1.6; transition:color .15s; }
.vc_toc .catalog_h3item a.a_flex{ font-size:14px; color:var( --va-muted ); }
.vc_toc a.a_flex:hover{ color:var( --va-accent ); }
.vc_toc .aflex_nums, .vc_toc .aflex_nums_h3{ color:var( --va-accent2 ); font-weight:700; flex-shrink:0; }

/*---------- 關鍵字標籤 ----------*/
.vc_tag--kw{ background:#f4f6f8; color:var( --va-ink-soft ); }

/*---------- 關於作者（E-E-A-T） ----------*/
.vc_author_card{
	display:flex; gap:18px; align-items:flex-start;
	margin:30px 0 0;
	padding:22px 24px;
	border:1px solid var( --va-line );
	border-radius:14px;
	background:#fbfdff;
}
.vc_avatar--lg{ width:60px; height:60px; font-size:24px; }
.vc_author_card_t{ font-size:16px; font-weight:800; color:var( --va-ink ); margin-bottom:6px; }
.vc_author_card_p{ font-size:15px; line-height:1.8; color:var( --va-ink-soft ); margin:0; }

/*---------- 延伸閱讀 ----------*/
.vc_related{ margin:40px 0 0; }
.vc_related_t{
	font-size:20px; font-weight:800; color:var( --va-ink );
	margin:0 0 16px; padding-left:13px;
	border-left:4px solid var( --va-accent );
}
.vc_related_grid{ display:grid; grid-template-columns:repeat( 2, minmax(0,1fr) ); gap:16px; }
.vc_related_item{
	display:flex; flex-direction:column;
	border:1px solid var( --va-line ); border-radius:12px; overflow:hidden;
	text-decoration:none; background:#fff;
	transition:all .15s;
}
.vc_related_item:hover{ border-color:var( --va-accent ); box-shadow:0 6px 20px -14px rgba(16,42,67,.35); transform:translateY(-2px); }
.vc_related_img{ aspect-ratio:8/5; background:var( --va-soft ); overflow:hidden; }
.vc_related_img img{ width:100%; height:100%; object-fit:cover; display:block; }
.vc_related_body{ padding:12px 14px 14px; }
.vc_related_title{
	font-size:15px; font-weight:700; line-height:1.5; color:var( --va-ink );
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vc_related_date{ display:block; margin-top:6px; font-size:12.5px; color:var( --va-muted ); }

/*---------- 404 ----------*/
.vc_404{ text-align:center; }
.vc_404_code{ font-size:72px; font-weight:900; color:var( --va-line ); line-height:1; margin-bottom:8px; }
.vc_404_p{ color:var( --va-muted ); margin:0 0 10px; }

@media (max-width:680px){
	.vc_summary{ padding:16px 16px 12px; }
	.vc_summary_list li{ font-size:15.5px; }
	.vc_related_grid{ grid-template-columns:1fr; }
	.vc_author_card{ flex-direction:column; gap:12px; }
}