/*===========================================================================
  blog_skin.css  —  全站外殼皮膚（header / footer / 全域視覺）
  載入於每一頁、common.css 之後
  風格來源：blog_innew_1（清新 teal 雜誌風 · 白底頂部導覽 · 大量留白）
===========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Noto+Serif+TC:wght@600;700;900&display=swap');

:root{
	/* ── 藍色系色票（沿用品牌藍 #007AB0）── */
	--sk-ink:      #15293a;   /* 內文：深藍墨色 */
	--sk-paper:    #f0f7fb;   /* 背景：清新淺藍白 */
	--sk-card:     #ffffff;
	--sk-accent:   #009de3;   /* 連結 / hover：亮藍 */
	--sk-accent-2: #007AB0;   /* 主色：品牌藍 */
	--sk-accent-3: #00A6E0;   /* 輔助藍：徽章點綴 */
	--sk-ink-soft: #3a4f63;
	--sk-muted:    #6b8298;
	--sk-line:     #d9e7f1;
	--sk-soft:     #e6f3fa;
	--sk-radius:   12px;
	--sk-shadow:   0 6px 24px rgba(0,99,150,.08);
	--header-height: 72px;
	--sk-serif: 'Noto Serif TC', 'Songti TC', serif;
	--sk-sans:  'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
	/* 品牌色變數沿用 variable_group.css 原本的藍（#007AB0 系），不再覆寫 */
}

/*---------- 全域基底 ----------*/
body{
	font-family:var( --sk-sans );
	background:var( --sk-paper );
	color:var( --sk-ink );
	-webkit-font-smoothing:antialiased;
	line-height:1.8;
}
html{ scroll-behavior:smooth; }

/* 標題改用襯線 → 雜誌感 */
.bh_feat_title, .bh_card_title, .article_h1title,
.bh_sectit_h, .html_indextitle, .html_title,
#showcon_set h2, #showcon_set h3,
.nmain_btitle, .amain_btitle, .vc_title{
	font-family:var( --sk-serif );
	letter-spacing:.5px;
}

/*===========================================================================
  HEADER —— 白底毛玻璃、置頂、品牌襯線字標、藥丸導覽
===========================================================================*/
.myBoxHeader_top{
	position:-webkit-sticky;
	position:sticky;
	top:0;
	width:100%;
	min-height:var( --header-height );
	background:rgba(255,255,255,.88);
	-webkit-backdrop-filter:saturate(180%) blur(10px);
	backdrop-filter:saturate(180%) blur(10px);
	border-bottom:1px solid var( --sk-line );
	box-shadow:0 2px 16px rgba(15,118,110,.05);
	z-index:1000;
}

/* 內層收進版心、橫向排列 */
.nav_right{
	max-width:1180px;
	min-height:var( --header-height );
	margin:0 auto;
	padding:0 24px;
	gap:18px;
	justify-content:flex-start;
	align-items:center;
}

/* 品牌字標（襯線 teal） */
.header_logo{
	width:auto !important;
	margin:0 !important;
	padding:0 !important;
	white-space:nowrap;
}
.header_logo b{
	font-family:var( --sk-serif );
	font-weight:900;
	font-size:24px;
	letter-spacing:1px;
	color:var( --sk-accent-2 );
	position:relative;
	padding-right:14px;
}
.header_logo b:after{
	content:'';
	position:absolute;
	right:0; bottom:8px;
	width:7px; height:7px;
	border-radius:50%;
	background:var( --sk-accent-3 );
}
.header_logo:hover b{ color:var( --sk-accent ); }
.header_logo img{ max-height:42px; }

/* 導覽列（藥丸 hover） */
.nav_itemgroups{
	width:auto !important;
	gap:2px;
	margin-left:24px !important;
	margin-right:auto !important;
	justify-content:flex-start !important;
}
.nav_item{
	font-family:var( --sk-sans );
	font-size:14.5px;
	font-weight:500;
	letter-spacing:.5px;
	color:var( --sk-ink ) !important;
	height:auto;
	padding:8px 14px !important;
	border-radius:10px;
	transition:background .2s, color .2s;
}
.nav_item, .nav_item a{ text-decoration:none !important; }
.nav_item:hover{
	background:var( --sk-soft );
	color:var( --sk-accent-2 ) !important;
}

/* 搜尋鈕做成圓形 teal */
.nav_icongroups{ width:auto !important; margin-left:0 !important; }
.nav_iconlist{
	width:44px; height:44px;
	padding:0 !important;
	border-radius:50%;
	color:var( --sk-accent-2 ) !important;
	font-size:18px !important;
	transition:all .2s;
}
.nav_iconlist:hover{
	background:var( --sk-accent-2 );
	color:#fff !important;
}

/* 手機 header 列 */
.nav_left{ padding:0 16px; }
.nav_left b, .nav_left img{ vertical-align:middle; }
.nav_left b{ font-family:var( --sk-serif ); font-weight:900; font-size:20px; letter-spacing:1px; color:var( --sk-accent-2 ); }

/*===========================================================================
  FOOTER —— 深 teal 墨色頁尾
===========================================================================*/
.footer_block{
	background:var( --sk-ink ) !important;
	color:rgba(255,255,255,.72) !important;
	margin-top:60px;
	padding:48px 24px 0 !important;
	border:0 !important;
}
.footer_block .footer_left,
.footer_block .footer_in2_3{
	max-width:1180px;
}
.footer_block a{ color:rgba(255,255,255,.72) !important; transition:color .15s; }
.footer_block a:hover{ color:var( --sk-accent-3 ) !important; }

.footerother li label{ color:#fff !important; font-weight:700; }
.footerright{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.footerright .fr_li{ list-style:none; }
.footerright .fr_li a{ font-size:14.5px; }

/* 社群圓鈕 */
.footer_btn{
	width:42px; height:42px;
	display:inline-flex; align-items:center; justify-content:center;
	border-radius:50%;
	background:rgba(255,255,255,.08);
	color:#fff !important;
	font-size:18px;
	margin:4px;
	transition:all .2s;
}
.footer_btn:hover{ background:var( --sk-accent-3 ); transform:translateY(-2px); }

/* 版權列 */
.footer_full{
	max-width:1180px;
	margin:36px auto 0 !important;
	padding:18px 0 !important;
	border-top:1px solid rgba(255,255,255,.1) !important;
	color:rgba(255,255,255,.4) !important;
	font-size:13px;
	letter-spacing:1px;
	text-align:center;
}

/*===========================================================================
  回頂 / 浮動鈕
===========================================================================*/
#gotop_v1 .flitem_icon,
.floatisFixed .float_item{
	border-radius:50% !important;
}

/*===========================================================================
  響應式
===========================================================================*/
@media (max-width:767px){
	.nav_right{ padding:0 14px; }
	.header_logo b{ font-size:21px; }
	.footer_block{ padding:36px 16px 0 !important; }
}

/*===========================================================================
  SEO / 無障礙補強（2026.09.13）
  - 導覽改成真正的 <a> 連結（爬蟲可跟隨）
  - 跳到主要內容、頁尾站點簡介與分類連結
===========================================================================*/
.skip_link{
	position:absolute; left:-9999px; top:0;
	z-index:9999;
	padding:10px 16px;
	background:var( --sk-accent-2 ); color:#fff !important;
	border-radius:0 0 10px 0;
	font-size:14px; text-decoration:none;
}
.skip_link:focus{ left:0; }

.nav_item{ padding:0 !important; }
.nav_item > a{
	display:block;
	padding:8px 14px;
	color:inherit !important;
	text-decoration:none !important;
}
.nav_iconlist > a{
	display:flex; align-items:center; justify-content:center;
	width:100%; height:100%;
	color:inherit !important; text-decoration:none !important;
}
.header_logo a{ color:inherit !important; text-decoration:none !important; }

.footer_about{ margin-bottom:22px; }
.footer_about_t{ font-family:var( --sk-serif ); font-weight:900; font-size:20px; color:#fff; letter-spacing:1px; margin-bottom:8px; }
.footer_about_p{ font-size:14px; line-height:1.8; color:rgba(255,255,255,.66); max-width:560px; margin:0; }

.footer_cats{ margin-top:22px; }
.footer_cats_t{ font-size:13px; font-weight:700; letter-spacing:1.5px; color:#fff; margin-bottom:8px; }
.footer_cats ul{ display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; padding:0; margin:0; }
.footer_cats li a{ font-size:14px; }