/* 全體 */
/* ============================= */
body { 
	margin:0; 
	overflow-x: hidden;
}
.body-global {
	background-image: var(--body-img);
	background-color: var(--body-bg);
}
.main-wrapper {
	min-height: 100vh;
	max-width: 1100px;
	margin: 0 auto;
	background-color: var(--mainWrapper-bg);
	box-shadow: var(--wrapper-shadow);
}
img { max-width: 100%; }

/* 重要內文樣式 */
/* ============================= */
a { text-decoration: none; color: inherit; }
a:hover { opacity: 0.35; transition: 350ms;}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--h);
    font-family: var(--MerriSerif);
}
h1 { font-size: 2rem; }
h5 { font-size: 1rem; }
p, table, li { 
	color: var(--p);
	font-family: var(--BitterSaraJheng);
	line-height: 1.6;
	font-size: 1rem;
}
strong, em strong { 
	font-family: var(--BitterSaraNoto);
	color: var(--strong); 
}
em { 
	font-family: var(--BitterSaraJheng);
	color: var(--em); 
	opacity: 85%; 
}
hr { 
	border: none; 
	height: 1px;
	background-color: var(--hr);
}
.article a { color: var(--link); }
/* 內文圖片 */
.imageGallery1 {
	max-width: 500px;
}
.lazyload {
	max-height: 500px;
}

/* nav-置頂 */
/* ============================= */
.nav-global {
	max-width: 1100px;
	width: 100%;
	height: 45px;
	top: 0px;
	position: fixed;
	text-align: center;
	background-color: var(--nav-bg);
	border-bottom: 1px solid var(--nav-border);
	box-shadow: 0px 1px 0px 0px var(--nav-shadow);
	font-family: var(--NotoSerif);
	transition: background 0.5s ease;
	z-index: 99;
}
.nav-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 50px auto 50px;
	place-items: center;
}
.nav-btn-l, .nav-btn-r {
	width: 35px;
	height: 35px;
	background-color: var(--nav-btn);
	color: var(--nav-btn-t);
	display: flex;
	text-align: center;
    align-items: center;
    justify-content: center;
    margin: 5px 5px;
}
.nav-link {
	color: var(--nav-t);
	font-weight: 300;
}
.nav-link a { padding: 0 50px; }

@media (max-width: 650px) and (min-width: 551px) {
	.nav-link a { padding: 0 28px; }
}
@media (max-width: 550px) {
	.nav-link a { padding: 0 22px; }
}

/* header */
/* ============================= */
@keyframes load-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.header-global {
	height: 330px;
	width: 100%;
	top: 0px;
	background-position: center top;
	background-color: var(--header-bg);
	background-image: var(--headerIndex-img);
	animation: 1s ease-out load-in;
}
.header-wrapper {
	padding-top: 55px;
	height: 275px;
	display: flex;
	margin: auto;
	align-items: center;
	justify-content: center;
	text-align: center;
}
#header-hover { 
	width: 380px;
	font-family: var(--TulpenSerif);
	color: var(--header-t);
	text-shadow: var(--header-t-shadow);
}
#header-hover:hover { 
	color: var(--header-t-hover); 
	text-shadow: var(--header-t-shadow-hover);
}
#header-hover-a:hover { 
	opacity: 1.0 !important; 
	transition: 1350ms !important; 
}
.site-title {
	letter-spacing: 13.44px;
	font-size: 32px;
}
.site-title2 {
	letter-spacing: 14.16px;
	font-size: 24px;
	font-weight: 500;
}
.site-title-hr {
	margin: 5px auto;
	height: 1px;
	width: 380px;
	background: var(--site-title-hr);
}
/* header-single */
.single-title {
	font-family: var(--MerriSerif);
	text-shadow: var(--header-t-shadow);
	color: var(--single-title);
	font-size: 40px;
	letter-spacing: 5px;
	padding: 0 32px 8px 32px;
}
@media (max-width: 600px) {
	.single-title { font-size: 32px; letter-spacing: 2px; }
}

/* 警語+歸檔連結+文章戳記 */
/* ============================= */
.stamp-wrapper {
	display: table;
	text-align: center;
	height: 55px;
	width: 100%;
	border-bottom: 1px solid var(--stamp-border);
	box-shadow: 0px 1px 0px 0px var(--stamp-shadow);
	background-color: var(--content-bg);
	z-index: 10;
	position: relative;
}
.warning-text {
	display: table-cell;
	vertical-align: middle;
	font-family: var(--NotoSans);
	color: var(--warning-t);
	font-size: 14px;
	font-weight: 500;
}
/* single-stamp */
.single-stamp {
	display: table-cell;
	vertical-align: middle;
	font-family: var(--BitterSaraNoto);
	font-size: 14px;
	color: var(--warning-t);
	font-weight: 500;
}
/* archive-link */
.archive-link {
	display: table;
	text-align: center;
	position: relative;
	height: 55px;
	width: 100%;
	border-bottom: 1px solid var(--stamp-border);
	box-shadow: 0px 1px 0px 0px var(--stamp-shadow);
	background-color: var(--content-bg);
}
.archive-link span {
	display: table-cell;
	vertical-align: middle;
	font-family: var(--NotoSerif);
	color: var(--archive-link);
}
@media (min-width: 600px){
	.stamp-br { display: none; }
}
@media (max-width: 600px){
	.stamp-space { display: none; }
	.warning-text, .single-stamp { font-size: 13px; }
}

/* post-list */
/* ============================= */
.note-grid-wrapper {
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 40px;
    background-color: var(--content-bg);
}
.note-grid {
	word-break:break-all;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px 15px;
}
.note-sum-box {
	padding: 15px 22px;
	border-radius: 15px;
	border-right: var(--note-box-border);
	border-left: var(--note-box-border);
}
.note-list-title {
	font-family: var(--NotoSerif);
	color: var(--note-list-title);
	font-weight: 700;
	font-size: 24px;
	padding: 18px 0;
	line-height: 115%;
}
.note-sum {
	font-family: var(--BitterSaraNoto);
	font-size: 15px;
	color: var(--p);
}
.note-list-stamp {
	font-family: var(--NotoSans);
	font-size: 13px;
	color: var(--note-list-stamp);
	text-transform: uppercase;
	padding: 18px 0;
}
@media (max-width: 820px) {
	.note-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) and (min-width: 530px) {
	.note-grid-wrapper { padding: 32px 24px;	}
}
@media (max-width: 529px) {
	.note-grid-wrapper { padding: 32px 16px;	}
	.note-grid { grid-gap: 12px 8px; }
	.note-sum-box { padding: 12px 6px; }
	.note-list-title { padding: 8px 0; font-size: 18px; }
	.note-sum { font-size: 13px; }
	.note-list-stamp { padding: 8px 0; font-size: 11px; }
}

/* single-content */
/* ============================= */
.single-main-wrapper {
	padding: 32px;
	display: block;
	word-wrap:break-word;
	background-color: var(--content-bg);
}
.article-wrapper:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.article {
	float: left;
	width: calc(82% - 64px);
	margin: 0 48px 0 16px;
}
@media (max-width: 600px) {
	.single-main-wrapper { padding: 32px 16px; }
}
/* TOC */
.toc-wrapper {
	float: right;
	width: 18%;
	position: sticky;
	top: 48px;
}
.toc {
	max-height: calc(100vh - 50px);
	overflow-y: auto;
	margin-top: 16px;
	margin-right: -32px;
	padding-right: 32px;
	padding-left: 15px;
	opacity: 88%;
	font-size: 14px;
}
.toc li, .toc-mobile li { 
	font-size: 14px; 
	font-family: var(--BitterSaraNoto);
	color: var(--toc-t);
	line-height: 1.75;
}
.toc ul, .toc-mobile ul {
    display: inline;
    list-style: none;
    padding-left: 0px;
    font-weight: 700;
    border: 0;
}
#TableOfContents > ul > li::before {
    content: "#";
    font-size: 10px;
    font-weight: 300;
    opacity: 30%;
    margin-left: -14px;
    padding-right: 4px;
}
.toc ul ul, .toc-mobile ul ul {
    list-style: none;
    font-weight: 400;
}
.toc ul ul ul > li {
    list-style: none;
    font-weight: 400;
    margin-left: 14px;
    opacity: 66%;
}
/* mobile */
.toc-mobile {
    column-count: 2;
    column-gap: 64px;
    column-rule: 1px solid var(--toc-grid);
    padding: 16px 32px;
    display: inline-block;  
    width: calc(100% - 64px);
    border-bottom: 1px solid var(--toc-border);
	box-shadow: 0px 1px 0px 0px var(--toc-shadow);
	background-color: var(--content-bg);
}
.toc-mobile ul ul ul > li {
    list-style: none;
    font-weight: 400;
    opacity: 66%;
}
.toc-mobile-hr {
    margin: 0;
}
@media (min-width: 801px) { .toc-mobile, .toc-mobile-hr { display: none; } }
@media (max-width: 800px) { 
	.toc { display: none; } 
	.article { width: 100%; margin: 0; }
}

/* archive */
/* ============================= */
.archive-wrapper {
	display: block;
	padding: 32px 40px 64px 40px;
	background-color: var(--content-bg);
}
.archive-grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 16px;
    row-gap: 16px;
}
.archive-grid h3 {
	font-family: var(--MerriSerif);
	font-size: 30px;
	margin: 16px 0;
	text-transform: capitalize;
}
.archive-date {
	opacity: 0.8;
}
.archive-title {
	font-family: var(--NotoSerif);
}
.archive-grid li::marker {
	color: var(--archive-marker);
}
@media (max-width: 860px) and (min-width: 531px) {
	.archive-grid { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 530px) {
	.archive-grid { grid-template-columns: 1fr; }
}

/* pager */
/* ============================= */
.pager-wrapper {
	text-align: center;
	padding-bottom: 32px;
	font-family: var(--CutiveSans);
	font-size: 18px;
	letter-spacing: 8px;
	color: var(--pager);
	background-color: var(--content-bg);
}
@media (max-width: 600px) { .pager-wrapper { letter-spacing: 2px; } }

/* footer */
/* ============================= */
#footer-global {
	background: var(--footer-bg);
	color: var(--footer-t);
}
.footer-link-wrapper {
	height: 50px;
	width: 100%;
	display: table;
	text-align: center;
	border-bottom: 1px solid var(--footer-link-border);
	box-shadow: 0px 1px 0px 0px var(--footer-link-shadow);
}
.footer-link { 
	display: table-cell; 
	vertical-align: middle; 
	font-family: var(--NotoSerif);
	letter-spacing: 4px;
	font-size: 14px;
}
.footer-link a {
	color: var(--footer-t);
}
@media (max-width: 500px) {
	.footer-link { font-size: 13px; letter-spacing: 2px; }
}
/* 自介  */
.footer-author-grid {
	display: grid;
	grid-template-columns: 160px 1fr;
	grid-gap: 32px;
	margin: 24px auto;
	width: 80%;
	font-family: var(--NotoSerif);
}
#author-img {
	width: 160px;
	height: 160px;
	border-radius: 160px;
	background-image: var(--author-img);
	margin: auto;
}
.footer-author-text {
	margin: auto;
	padding-bottom: 10px;
}
.author-name {
	font-weight: 700;
	font-size: 36px;
	padding-bottom: 10px;
}
@media (max-width: 540px) {
	.footer-author-grid { grid-template-columns: 140px 1fr; grid-gap: 16px; width: 90%; }
	#author-img { width: 140px; height: 140px; border-radius: 140px; background-size: 100%; }
	.author-name { font-size: 30px; }
	.author-intro { font-size: 15px; }
}
/* 版權  */
.footer-copyright {
	color: var(--footerCopyright-t);
	background: var(--footerCopyright-bg);
	height: 50px;
	width:100%;
	display: table;
	text-align: center;
}
.footer-copyright-text {
	display: table-cell;
	vertical-align: middle;
	font-family: var(--CutiveSans);
	font-size: 13px;
	font-weight: 300;
	padding-bottom: 5px;
}
.footer-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--footerCopyright-bg);
}
@media (min-width: 600px){
	.footer-br { display: none;	}
}

/* Go to Top */
/* ============================= */
.gotop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 24px;
    height: 24px;
    z-index: 999;
    opacity: 0.5 !important; 
}

/* 內文-其他樣式 */
/* ============================= */
/* 標題前加# */
.article h1:before, .article h2:before, .article h3:before, .article h4:before, .article h5:before, .article h6:before {
    content: "§";
    font-size: 12px;
    font-weight: 400;
    vertical-align: middle;
    padding-right: 8px;
    margin-left: -16px;
    opacity: 50%;
}
@media screen and (max-width: 850px) {
    .article h1:before, .article h2:before, .article h3:before, .article h4:before, .article h5:before, .article h6:before {
        all: initial;
    }
}
/* 定義 */
dd, dt, dl { line-height: 1.45; }
dt {
    font-weight: bold;
    font-family: var(--MerriSerif);
    padding-bottom: 3px;
    padding-top: 3px;
    color: var(--dt);
}
dd {
    margin-left: 0;
    padding-left: 1.6em;
    border-left: 1px dotted var(--dd-border);
    color: var(--p);
}
/* 引述 */
blockquote {
    margin: 8px 0px;
    padding: 1px 16px;
    border-left: 5px solid var(--blockquote-border);
    background-color: var(--blockquote-bg);
    border-radius: 3px;
}
/* 縮減小螢幕的縮進 */
@media screen and (max-width: 700px) {
    .article ul { padding-inline-start: 20px; }
    .article ol { padding-left: 20px; }
}
/* 腳註 */
.footnote-ref::before {
    content: "[";
    padding-right: 1px;
}
.footnote-ref::after {
    content: "]";
    padding-left: 1px;
}
/* 表格 */
table {
    border-collapse: collapse; /* 讓tr得以產生格線 */
    width: 100%;
    margin: 32px 0;
}
tr {
    border-bottom: 1px solid var(--table-line);
}
td, th {
    padding: 5px 10px;
}
table thead {
    background: var(--table-bg);
}

/* Code Block */
/* ============================= */

pre, code, kbd, samp {
	font-family: var(--ConsMono);
	font-size: 13px;
}
code {
    color: var(--code-inline);
	background-color: var(--code-bg);
    border-radius: 3px;
	padding: 2px 5px;
}
pre {
    background-color: var(--code-bg);
    border-radius: 5px;
	border-left: 5px solid var(--code-border);
	display: block;
	padding: 1.25rem;
	margin-bottom: 1.25rem;
	overflow: auto;
	color: var(--code-t);
    max-height: 800px; /* 程碼塊最大高度 */
}
pre code {
	padding: 0;
	color: inherit;
	white-space: inherit;
	background: inherit;
	border: 0;
}
kbd {
	padding: 2px 3px;
	color: var(--code-t);
	background-color: var(--code-bg);
}

/* Gist */
/* ============================= */
.gist {
    filter: var(--gist-filter); /*暗色系專用*/
}
.gist-data {
    max-height: 400px;
}
.gist-file tr {
    border: 0; background: #fff;
}
div.gist .gist-file {
    border: 1px solid var(--code-border); /*增加外框*/
}

/* 導覽列overlay */
/* ============================= */
#menu-overlay {
	display: none;
}
.menu {
	display: block;
	
	width: calc(100% - 64px);
	height: calc(100vh - 109px);
	z-index: 50;
	background-color: var(--menu-bg);
	overflow-y: auto;
	text-align: left;
	padding: 32px;
}
.menuCategory {
	column-count: 1;
}
.menuTag {
	column-count: 5;
}
.menuCategory li, .menuTag li {
	list-style-type: none;
	color: var(--menu-t);
	text-transform: capitalize;
	font-family: var(--CutiveSans);
	font-size: 14px;
}
.menu-hr {
	margin: 16px 0;
	border: none; 
	height: 1px;
	background-color: var(--menu-hr);
}
.lock-scroll {
	overflow-y: hidden;
}
.menu:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 32px;
}
@media (max-width: 880px) and (min-width: 701px) {
	.menuTag { column-count: 4; };
}
@media (max-width: 700px) and (min-width: 531px) {
	.menuTag { column-count: 3; }
}
@media (max-width: 530px) {
	.menuTag { column-count: 2; }
}

/* 內嵌youtube */
/* ============================= */
.youtube {
	aspect-ratio: 16/9;
}