/* ================== Debug 面板樣式 ================== */

.debug-panel {
    position: fixed; /* 固定在視窗，不會因滾動而變動 */
    top: 10px; /* 距離視窗頂部 10px */
    right: 10px; /* 距離視窗右側 10px */
    width: 300px; /* 設定面板寬度為 300px */
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    color: white; /* 設定文字顏色為白色 */
    padding: 10px; /* 設定內邊距，使內容與邊框保持距離 */
    border-radius: 5px; /* 圓角邊框，增加視覺柔和度 */
    font-size: 14px; /* 設定文字大小 */
    z-index: 9999; /* 設定層級，確保面板顯示在最上層 */
}

.debug-header {
    font-weight: bold; /* 設定文字加粗 */
    background: rgba(255, 255, 255, 0.2); /* 設定半透明白色背景 */
    padding: 5px; /* 設定內邊距，確保內容不緊貼邊框 */
    cursor: grab; /* 設定鼠標樣式為可拖曳 */
}

.debug-close {
    position: absolute; /* 絕對定位，使其能自由擺放 */
    top: 5px; /* 靠近面板頂部 */
    right: 5px; /* 靠近面板右側 */
    cursor: pointer; /* 設定鼠標樣式為可點擊 */
    color: red; /* 設定關閉按鈕為紅色 */
}

.debug-drag {
    display: inline-block; /* 設定為行內區塊元素 */
    cursor: default; /* 預設鼠標樣式 */
    padding: 2px 5px; /* 設定內邊距，保持適當距離 */
}

.debug-drag:hover {
    cursor: grab; /* 滑鼠懸停時改為可拖曳樣式 */
}

/* ================== 全局樣式 ================== */

body {
    background-color: #D6E6E5; /* 設定背景顏色 */
    color: #103C3F; /* 設定文字顏色 */
}

/* ================== 按鈕樣式 ================== */

.button {
    background: #2E5E60; /* 設定按鈕背景顏色 */
}

.button:hover {
    background: #ff8800; /* 當鼠標懸停時變亮 */
}

/* ================== 標題顏色 ================== */

h1, h2, h3, h4, h5, h6 {
    color: #ffcc00; /* 設定標題顏色為黃色 */
}

/* ================== 頁面佈局 ================== */

.inline-edit {
	display: inline; /* ← 這行關鍵！讓它跟文字在同一行 */
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 0 0.3em;
	font-size: inherit;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	vertical-align: baseline;
}

#header-wrapper {
   padding: 0.5em 0 0.5em 0; /*  設定上下內邊距 */
}

#banner .row > * {
	padding: 5px 0.5em 0 5px;
}
#banner .row img {
    width: 100%; /* 讓圖片填滿容器 */
    max-width: 500px; /* 限制最大寬度 */
    height: auto; /* 保持圖片比例 */
}

#banner p {
    font-size: 1.40em; /* 設定字體大小 */
    display: -webkit-box; /* 讓文字內容以盒模型方式顯示 */
    -webkit-line-clamp: 5; /* 限制最多顯示 5 行 */
    -webkit-box-orient: vertical; /* 設定為垂直方向排列 */
    overflow: hidden; /* 隱藏超過範圍的內容 */
    text-overflow: ellipsis; /* 超過範圍時顯示省略號 */
}

#banner h2 {
    font-size: 2.5em; /* 設定標題字體大小 */
    margin: 0.1em 0 0.35em 0; /* 設定上下邊距 */
}

#banner .button {
    width: 30%; /* 設定按鈕寬度為 30% */
    margin-bottom: 0.5em; /* 設定底部邊距 */
    float: right; /* ✅ 讓按鈕靠右對齊 */
}

/* ================== 響應式設計 ================== */

@media screen and (max-width: 980px) {
    #banner .button {
        width: 100%; /* 讓按鈕在手機上保持正常大小 */
        float: none; /* 移除浮動，讓按鈕正常排列 */
    }
}

/* ================== 主要容器 ================== */

.container {
    width: 1400px; /* 設定容器寬度 */
}

#features-wrapper .box.feature {
    /*height: 300px;  固定高度 */
    overflow: hidden; /* 避免超出範圍的內容 */
}

#features-wrapper .inner {
    padding: 1.5em; /* 增加內部間距 */
    padding-bottom: 4em; /* 增加底部內邊距 */
}

#features-wrapper .box.feature p {
    display: -webkit-box; /* 盒模型顯示 */
    -webkit-line-clamp: 3; /* 限制最多顯示 3 行 */
    -webkit-box-orient: vertical; /* 設定為垂直方向排列 */
    overflow: hidden; /* 隱藏超出範圍的內容 */
    text-overflow: ellipsis; /* 顯示省略號 */
}

#features-wrapper .box.feature h2 {
    display: -webkit-box; /* 盒模型顯示 */
    -webkit-line-clamp: 1; /* 限制最多顯示 1 行 */
    -webkit-box-orient: vertical; /* 設定為垂直方向排列 */
    overflow: hidden; /* 隱藏超過範圍的內容 */
    text-overflow: ellipsis; /* 顯示省略號 */
}

#features-wrapper .button {
    display: flex; /* 使用 Flex 讓按鈕更靈活 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中（可選） */
    height: 2.5em; /* 設定高度 */
    font-size: 1.0em; /* 讓文字變小 */
    float: right; /* ✅ 讓按鈕靠右對齊 */
}

#features-wrapper img {
    width: 100%; /* 讓圖片填滿容器 */
    max-width: 500px; /* 限制最大寬度 */
    height: auto; /* 保持圖片比例 */
}
#article-list {
    width: 100%;
    border: 1px solid #ddd;
}

/* 每一列 */
#article-list .article-header,
#article-list .article-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    /*padding: 0.5em 1em;*/
    padding: 0.1em 1em 0.1em;
    border-bottom: 1px solid #ddd;
}

/* 偶數列背景 */
#article-list .article-row:nth-child(even) {
    background-color: #f9f9f9;
}

/* 欄位通用樣式 */
#article-list .column {
    flex: 1;
    padding: 0.1em;
    min-width: 0;
}
#article-list .column {
    flex: 1;
    padding: 0.1em;
    min-width: 0;
}

/* 標題超長處理與樣式 */
#article-list .column.title a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: bold;
    color: #333;
    text-decoration: none;

}


#article-list div.column.title {
	min-width: 50%;
}
#article-list .column.title a:hover{
  	color: #0077cc; /*   滑鼠移上去的顏色 */

}


#article-list .column.author,
#article-list .column.views,
#article-list .column.date {
    flex: 1;
    min-width: 8%;
}



/* 手機與平板 RWD 調整 */


@media screen and (max-width: 768px) {
    #article-list .article-header,
    #article-list .article-row {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 12px;
        border-bottom: 1px solid #ccc;
    }

    #article-list .column {
        width: 100%;
        margin-bottom: 6px;
    }

    #article-list .column.title a {
        font-size: 1.1em;
        word-wrap: break-word;
    }
}

/* 小標籤（如“作者：”）可選擇加上 */
#article-list .row-label {
    font-weight: bold;
    margin-right: 6px;
}
@media screen and (max-width: 800px) and (orientation: landscape) {
    #article-list .article-header,
    #article-list .article-row {
        flex-direction: column;
        align-items: flex-start;
    }

    #article-list .column {
        width: 100%;
        margin-bottom: 6px;
    }
}

#nav ul li {
	#float: left;
	#line-height: 4.5em;
	padding-left: 0.2em;
	font-size: 1.15em;

}
	#nav ul li a, #nav ul li span {
		-moz-transition: background-color .1s ease-in-out;
		-webkit-transition: background-color .1s ease-in-out;
		-ms-transition: background-color .1s ease-in-out;
		transition: background-color .1s ease-in-out;
		font-weight: 800;
		letter-spacing: 0.025em;
		color: #696969;
		text-decoration: none;
		border-radius: 6px;
		padding: 0.4em 0.4em 0.4em 0.4em;
	}
	#navToggle {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.1s ease;
		-webkit-transition: -webkit-transform 0.1s ease;
		-ms-transition: -ms-transform 0.1s ease;
		transition: transform 0.1s ease;
		display: block;
		height: 44px;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
	}	
	
	#navPanel {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateX(-275px);
		-webkit-transform: translateX(-275px);
		-ms-transform: translateX(-275px);
		transform: translateX(-275px);
		-moz-transition: -moz-transform 0.1s ease;
		-webkit-transition: -webkit-transform 0.1s ease;
		-ms-transition: -ms-transform 0.1s ease;
		transition: transform 0.1s ease;
		display: block;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 275px;
		z-index: 10002;
		background: #fff;
		box-shadow: inset -3px 0px 0px 0px #dfdfdf;
		padding: 0 23px 0 20px;
	}	
	
	
	
#main-wrapper {
	/* background: #fff; */
	/* box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.05); */
	padding: 1em 0 1em 0;
}

.pagination {
    margin: 10px 0;
    text-align: center;
}

.pagination button {
    margin: 0 5px;
    padding: 6px 12px;
    background: #eee;
    border: none;
    cursor: pointer;
}

.pagination button.active {
    background: #333;
    color: white;
    font-weight: bold;
}



#publish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 20px;
}

#publish-header .left-side {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
    max-width: 70%;

}

#publish-header .right-side {
  /* 不需要 text-align 了，因為 flex 幫我們對齊 */
    max-width: 30%;
	  text-align: right;


}

#publish-btn {
  display: inline-block;
  font-size: 1.5em;
  padding: 2px 24px;
  background-color: #0078D4;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

#publish-btn:hover {
  background-color: #005ea6;
}

#publish-header a {
    color: inherit;         /* 繼承父層的文字顏色 */
    text-decoration: none;  /* 移除底線 */
    transition: color 0.2s; /* 加點平滑的過渡效果，可選 */
}

#publish-header a:hover {
    color: #0078D7;         /* 滑過去時才改變顏色 */
}

.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  max-width: 800px;
  width: 90%;
}

.identity-flex {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.identity-option {
  flex: 1 1 45%;
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: left;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.identity-option h3 {
  margin-top: 0;
}

.identity-option ul {
  margin: 0.5rem 0 1rem 1.2rem;
}

.identity-option button {
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.identity-option button:hover {
  background-color: #0056b3;
}