/* ========== 全域變數定義 ========== */
:root {
  --font-family-base: 'Inter', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
  --font-family-heading: 'Poppins', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans SC', sans-serif;

  --font-weight-heading: 700;
  --font-size-post-heading: 1.25rem;

  --color-divider: #6c757d;

  --alert-max-width: 520px;
  --alert-spacing: 1rem;
  --alert-radius: 0.25rem;

  --container-mobile-padding: 1.5rem;

  --navbar-bg-light: #ffffff;
  --navbar-bg-dark: #1a1a1a;
}

[data-bs-theme=light] {
--bs-heading-color: rgb(4, 16, 30);
--bs-body-color: rgb(4, 16, 30);
--bs-body-real-color: #f5f8fa;
--bs-link-color-rgb: 108, 117, 125;
--bs-link-hover-color-rgb: 4, 16, 30;
}

[data-bs-theme=dark] {
--bs-heading-color: rgb(229, 229, 229);
--bs-body-color: rgb(229, 229, 229);
--bs-body-real-color: rgb(26, 31, 38);
--bs-link-color-rgb: 200, 200, 200;
--bs-link-hover-color-rgb: 255, 255, 255;
}



/* ========== 字體與基本元素 ========== */
body,
input,
textarea,
button {
  font-family: var(--font-family-base);
}
legend {
  font-weight: var(--font-weight-heading);
}
legend.form-label {
}
legend,
.form-text {
  font-size: 1rem;
}
.btn {
  font-family: var(--font-family-base);
  transition: all 0.3s ease;
}

a {
  text-decoration: none;
}
a:hover:not(.btn,.dropdown-item) {
  text-decoration: underline;
}

.pagination {
  --bs-pagination-active-bg: var(--bs-danger);


--bs-pagination-color: var(--bs-body-color);
    --bs-pagination-hover-color: var(--bs-body-color);
    --bs-pagination-focus-color: var(--bs-body-color);
    --bs-pagination-active-bg: var(--bs-danger);
    --bs-pagination-active-border-color: var(--bs-danger);
  
}

.bounce-hover {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.bounce-hover:hover {
  transform: scale(1.05);
}

fieldset .nav-item{
  font-size: .75rem;
}

fieldset fieldset legend,
fieldset section h1,
fieldset section h2,
fieldset section h3,
fieldset section h4,
fieldset section h5,
fieldset section h6 {
  font-size: .75rem;
}


.nav-pills--underline {
  --bs-nav-pills-link-active-color: var(--bs-body-color);
  --bs-nav-pills-link-active-bg: transparent;
  --bs-nav-link-padding-y: 0;
  --bs-nav-link-padding-x: 0;
  --bs-nav-pills-border-radius: 0;
  --bs-nav-pills-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-secondary-color);
  --bs-nav-link-color: var(--bs-secondary-color);
}
.nav-pills--underline .active.nav-link {
  border-bottom: 3px solid var(--bs-body-color);
}

.nav-pills--underline .nav-item:not(:last-child) {
  margin-right: 1rem
}


.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  filter: saturate(0);
  cursor: not-allowed;
}

/* ========== 標題樣式 ========== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
}

.navbar,
.navbar .btn {
  font-weight: var(--font-weight-heading);
}

.navbar .dropdown-menu {
  z-index: 2000;
}

/* ========== 文章內標題樣式 ========== */
.post h1,
.post h2,
.post h3,
.post h4,
.post h5,
.post h6 {
  font-size: var(--font-size-post-heading);
  font-style: italic;
}

/* ========== Alert 通知框樣式 ========== */
.alert--notify {
  width: auto;
  max-width: var(--alert-max-width);
  left: var(--alert-spacing);
  right: auto;
  z-index: 1050;
  border-radius: var(--alert-radius);
}

.dragover-active {
  border-color: var(--bs-info) !important;
  transition: background-color 0.3s, border-color 0.3s;
}

/* ========== 工具專用樣式 ========== */
.pen {
  color: #00f !important;
  font-weight: bold;
}

.amount-form {
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
  border: 1px solid #dd1405;
  color: #dd1405;
  background-color: #fff;
}

.table--amount-form {
  --bs-table-border-color: #dd1405;
  --bs-table-color-state: #dd1405;
  --bs-table-bg: #fff;
  min-width: 325px;
  color: #dd1405;
}

.table--amount-form td {
  font-size: 1.75rem;
}

.table--amount-form td,
.table--amount-form th {
  vertical-align: middle;
  font-weight: var(--font-weight-heading);
}

/* ========== 刪除線樣式 ========== */
.strikethrough {
  position: relative;
}

.strikethrough::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: red;
}

/* ========== 分隔線樣式 ========== */
.custom-divider .list-inline-item:not(:last-child)::after {
  content: "|";
  color: var(--color-divider);
  margin-left: 0.5rem;
}
.hero-section {
  transition: filter 0.3s ease;
}
.sr-only-not-absolute {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}
.blurred {
  pointer-events: none; /* 可選，避免用戶點到被模糊的按鈕 */
}
/* ========== 主題背景樣式 ========== */

body {
  background-color: var(--bs-body-real-color);
}



[data-bs-theme="light"] .navbar {
  background-color: rgb(255, 255, 255);
  border-bottom-color: rgb(237, 237, 238);
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

[data-bs-theme="dark"] .navbar {
background-color: rgb(26, 31, 38);
border-bottom-color: rgb(48, 53, 59);
border-bottom-style: solid;
border-bottom-width: 1px;
}

/* ========== 手機尺寸調整 ========== */
@media (max-width: 576px) {
  .alert {
    max-width: calc(100vw - 2 * var(--alert-spacing));
    right: var(--alert-spacing);
    left: var(--alert-spacing);
    border-radius: var(--alert-radius);
  }

  .container,
  .container-fluid {
    padding-left: var(--container-mobile-padding) !important;
    padding-right: var(--container-mobile-padding) !important;
  }
}

@media (max-width: 768px) {
  .amount-form {
    font-size: 1rem;
  }

  .table--amount-form th,
  .table--amount-form td {
    padding: 0.25rem 0;
    line-height: 0.95rem;
    font-size: 0.75rem;
  }
}