/* fonts::start */

@font-face {
	font-family: ExtB;
	src: url('/static/fonts/unlui-extb.woff2') format('woff2');
	unicode-range: U+20000-2EBE0;
}

@font-face {
	font-family: ExtG;
	src: url('/static/fonts/unlui-extg.woff2') format('woff2');
	unicode-range: U+2EBF0-2EE50, U+30000-323AF;
}

@font-face {
	font-family: 'Noto Sans';
	src: url('/static/fonts/NotoSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	unicode-range: U+0020-007F,
		/* Basic Latin */
		U+00A0-036F,
		/* Latin-1 Supplement, Latin Extended-A, Latin Extended-B, IPA Extensions,Spacing Modifier Letters, Combining Diacritical Marks */
		U+1D00-1EFF,
		/* Phonetic Extensions, Phonetic Extensions Supplement, Combining Diacritical Marks Supplement, Latin Extended Additional */
		U+2070-209F,
		/* Superscripts and Subscripts Block */
		U+25A0-25FF;
	/* Geometric Shapes */
}

@font-face {
	font-family: 'Noto Sans';
	src: url('/static/fonts/NotoSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	unicode-range: U+0020-007F,
		/* Basic Latin */
		U+00A0-036F,
		/* Latin-1 Supplement, Latin Extended-A, Latin Extended-B, IPA Extensions,Spacing Modifier Letters, Combining Diacritical Marks */
		U+1D00-1EFF,
		/* Phonetic Extensions, Phonetic Extensions Supplement, Combining Diacritical Marks Supplement, Latin Extended Additional */
		U+2070-209F,
		/* Superscripts and Subscripts Block */
		U+25A0-25FF;
	/* Geometric Shapes */
}

:root {
	--font-default-sans-serif: ExtB, ExtG, 'Noto Sans', apple-system, BlinkMacSystemFont, noto-sans-woff, Microsoft YaHei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

body {
	font-family: var(--font-default-sans-serif);
}

:lang(zh-TW) {
	font-family: ExtB, ExtG, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* fonts::end */

:root {
	--tonguan-green: #06bb94;
	--tonguan-green-light: #a3e4d7;
	/* 主色調淺色 */
	--tonguan-green-dark: #048c6d;
	/* 主色調深色 */
	--tonguan-blue: #007bff;
	--tonguan-gray: #6c757d;
	/* 灰色調 */
	--tonguan-gray-light: #e9ecef;
	/* 淺灰色 */
	--tonguan-gray-dark: #495057;
	/* 深灰色 */
}

/* 背景色 */
.bg-primary {
	background-color: var(--tonguan-green) !important;
	color: #ffffff !important;
}

.bg-success {
	background-color: var(--tonguan-green-dark) !important;
	color: #ffffff !important;
}

.bg-secondary {
	background-color: var(--tonguan-gray) !important;
	color: #ffffff !important;
}

/* 按鈕顏色 */
.btn-primary {
	background-color: var(--tonguan-green) !important;
	border-color: var(--tonguan-green) !important;
	color: #ffffff !important;
}

.btn-primary:hover {
	background-color: var(--tonguan-green-dark) !important;
	border-color: var(--tonguan-green-dark) !important;
}

.btn-outline-primary {
	border-color: var(--tonguan-green-dark) !important;
	color: var(--tonguan-green-dark) !important;
}

.btn-outline-primary:hover {
	background-color: var(--tonguan-green-dark) !important;
	border-color: var(--tonguan-green-dark) !important;
	color: #ffffff !important;
}

.btn-success {
	background-color: var(--tonguan-green-dark) !important;
	border-color: var(--tonguan-green-dark) !important;
	color: #ffffff !important;
}

.btn-success:hover {
	background-color: var(--tonguan-green) !important;
	border-color: var(--tonguan-green) !important;
}

.btn-secondary {
	background-color: var(--tonguan-gray) !important;
	border-color: var(--tonguan-gray) !important;
	color: #ffffff !important;
}

.btn-secondary:hover {
	background-color: var(--tonguan-gray-dark) !important;
	border-color: var(--tonguan-gray-dark) !important;
}

/* header::start */
.nav a,
.nav a:hover,
.nav a:focus {
	color: #fff;
	text-decoration: none;
}

.navbar-nav .nav-link-header {
	padding: 0%;
	padding-left: 0%;
	padding-right: 0%;
}

@media (min-width: 768px) {
	.navbar-expand-md .navbar-nav .nav-link-header {
		padding: 0%;
		padding-left: 0%;
		padding-right: 0%;
	}
}

body {
	padding-top: 56px;
}

.navbar {
	background-color: var(--tonguan-green);
}

.navbar .dropdown-menu.show {
	background-color: #fff;
}

.navbar .dropdown-item {
	color: #000;
}

.navbar button,
.navbar button:hover,
.navbar button:focus {
	color: #fff;
}

.navbar-brand {
	margin-right: 0.5rem;
}


#btn-simplify:hover,
#btn-simplify:focus {
	color: #495057;
	outline: 0;
	box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}

.navbar-toggler:focus {
	color: #495057;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

@media (max-width: 767px) {
	.navbar-collapse {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}

	.navbar-toggler {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	}

	#btn-simplify {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
		margin-left: auto !important;
	}
}

/* header::end */

/* title navigation::start */
#title {
	scroll-margin-top: 150px;
}

#quick-nav {
	top: 56px;
}

/* title::end */

/* footer::start */
a {
	text-decoration: none;
}

a:hover,
.search-link:hover,
.category-search-link:hover,
.search-link-haeng:hover,
.search-link-engha:hover,
.search-link-haeng-supp:hover,
.search-link-hakhiang:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

h2>a,
footer a {
	color: black;
}

/* footer::end */

.badge-title {
	font-size: 50%;
	line-height: normal;
	font-weight: normal;
	border-radius: 0.2em;
}

.badge-text {
	font-size: 90%;
	line-height: normal;
	font-weight: normal;
	border-radius: 0.2em;
}


.bg-normal-size {
	font-size: 75%;
}

blockquote {
	padding: 0 1em;
	color: gray;
	border-left: 0.25em solid lightgray;
	text-align: left;
}

/* 通用 scroll 類 */
.scroll {
	overflow: auto;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;
	position: relative;
}

/* 確保內部元素不會被截斷 */
.scroll>* {
	min-width: min-content;
	/* 重要：確保內部元素保持最小內容寬度 */
}

/* 針對表格優化 */
.scroll>table {
	width: auto;
	/* 讓表格根據內容自然寬度 */
	min-width: 100%;
	/* 但至少填滿容器 */
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

@media (max-width: 767px) {
	.scroll {
		overflow: scroll;
	}
}

@media (min-width: 992px) {

	.input-group,
	.result {
		width: 720px;
		margin-left: auto;
		margin-right: auto;
	}
}

.container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 768px) {

	.container,
	.container-md,
	.container-sm {
		max-width: 750px;
	}
}

@media (min-width: 992px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm {
		max-width: 960px
	}
}

@media (min-width: 1200px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl {
		max-width: 1020px
	}
}

@media (min-width: 1400px) {

	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1080px
	}
}

.main-container {
	margin-top: 60px;
	margin-bottom: 60px;
}

.result h5 {
	text-align: left;
}

.result-title {
	margin-top: 60px;
}

.align-row {
	align-items: center;
}

.character {
	font-size: 1.5em;
}

.lomaji {
	font-size: 0.95em;
}

.lomaji-md {
	font-size: 1.1em;
}

.lomaji-lg {
	font-size: 1.25em;
}

.kautsu {
	color: rgb(148, 59, 59);
}

.sheng {
	color: red;
}

.yun {
	color: green;
}

.yunbu {
	color: teal;
}

.diao {
	color: blue;
}

.she {
	color: orange;
}

.deng {
	color: gray;
}

.kaihe {
	color: purple;
}

.fanqie {
	color: indigo;
}

.mandarin {
	font-size: 0.85rem;
}

.row-container {
	margin: 0px auto;
}

.huatim,
.huatim:focus {
	color: teal;
	background: transparent;
	border: none;
	outline: none;
}

.card-row {
	align-items: center;
}

/* paging::start */
#page-input {

}

.page-item:last-child .page-link {
	margin-left: 0;
	margin-right: 0;
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-top-right-radius: 0rem;
	border-bottom-right-radius: 0rem;
}

.page-first-item:last-child .page-link {
	margin-left: 0;
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
	border-top-right-radius: 0rem;
	border-bottom-right-radius: 0rem;
}

.page-last-item:last-child .page-link {
	margin-left: 0;
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.page-jump-to {
	width: 30%;
}

#page-input {
	width: 100%;
	text-align: center;
}

/* paging::end */

.list,
.list li,
.list ul,
ol {
	text-align: left;
}

.table,
.table-docs {
	margin: auto;
	overflow: auto;
}

.table td,
.table th {
	padding: 0.45rem;
	vertical-align: middle;
	border: 1px solid #dee2e6;
}

.table-docs td,
.table-docs th {
	padding: 0.75rem;
	vertical-align: middle;
	border: 1px solid #dee2e6;
}

th {
	background-color: rgba(0, 0, 0, 0.05);
}

/* about page::start */
.jumbotron {
	padding: 3rem 0rem;
	word-wrap: break-word;
}

.logo {
	width: 320px;
	border-radius: 1em;
}

@media (max-width: 400px) {
	.logo {
		width: 80%;
	}
}

#navbar-logo {
	height: 25px;
	width: 53px;
}

.jumbotron p {
	font-size: 18px;
}

.jumbotron rt {
	font-size: 14px;
}

.jumbotron li {
	padding: 8px 0 0 0;
	font-size: 18px;
}

.jumbotron a {
	color: #000;
}

.bg-soft-blue-gray {
	background-color: #dce9e9;
}

/* about page::end */

/* 地名介紹附帶圖片 */
figure>img {
	max-width: 95%;
}

/* 漳典嵌套式下劃線 */
.outer-underline {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

.outer-underline>u {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Notes */
.haeng-common-notes {
	color: var(--bs-primary);
	font-weight: 500;
}

.haeng-common-notes>mark {
	color: var(--bs-primary);
	font-weight: 500;
}

.haeng-english-notes {
	color: purple;
}

.haeng-english-notes>mark,
.haeng-english-notes>b>mark {
	color: purple;
}

.tooltip .tooltip-inner {
	background-color: rgba(0, 0, 0, 0.6);
	/* 半透明黑色背景 */
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	/* 背景模糊效果 */
}

/* 廈英分栏用 */
.masonry-container {
	column-count: 2;
	column-gap: 1rem;
}

@media (max-width: 768px) {
	.masonry-container {
		column-count: 1;
	}
}

.masonry-item {
	break-inside: avoid;
	margin-bottom: 1rem;
	width: 100%;
}

/* 高亮覆盖层样式 */
.haeng-highlight-overlay {
	pointer-events: none;
}

.haeng-highlight-overlay mark {
	background-color: #ffe9b3 !important;
	opacity: 0.75;
}

/* 属性高亮样式 */
.haeng-attr-highlight {
	background-color: #ffe9b3 !important;
	opacity: 0.75;
}

/* 确保tooltip容器正确 */
.haeng-poj-notes,
.haeng-english-notes {
	cursor: pointer;
	text-decoration: none;
	border-bottom: 1px dotted #999;
	padding-bottom: 0px;
}

/* 防止高亮覆盖层影响交互 */
.haeng-text,
.engha-text,
.haeng-supp-text {
	position: relative;
	z-index: 3;
}

/* 刪除線 */
del {
	text-decoration: none;
	position: relative;
	display: inline-block;
}

del::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: currentColor;
	/* 使用文字顏色 */
	transform: rotate(5deg);
	/* 調整斜線角度 */
	transform-origin: center;
}

code {
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", var(--font-default-sans-serif);
	font-size: 100%;
}

.no-arrow {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: none !important;
	padding-right: .75rem;
	/* 把原本给箭头预留的空间拿掉 */
}

.btn,
.btn:hover,
.btn:focus {
	text-decoration: none;
}