/* ============================================================
   玄境 · 版型層（base）
   ------------------------------------------------------------
   為什麼有這個檔案
   ============================================================
   原本前台與後台都從 CDN 載入 Bootstrap 4.5.2（CSS 約 160KB、
   JS 60KB）以及它所依賴的 jQuery 3.5.1（87KB）與 Popper（21KB）。
   實際用到的只有極少一部分：
     · 12 欄格線（container / row / col-*）
     · 少數 spacing 與 flex 工具類
     · 深色表單與按鈕的外觀骨架
     · navbar 收合（這是唯一用到 Bootstrap JS 的地方）
   其餘（modal、dropdown、carousel、tooltip、reboot、print…）
   在這個站上完全沒有出現。

   Bootstrap 的格線本身只是 CSS；navbar 收合也只需要幾行原生 JS。
   因此這裡以相同類名重寫最小實作，讓既有 HTML 不必改寫，
   同時：
     1. 省下每頁約 350KB 的第三方請求（四個 CDN 網域）
     2. 移除對外部 CDN 的可用性依賴
     3. 修掉 Bootstrap .row 的負邊距（-15px）設計——
        它會與頁面自訂的 .row 撞名（見 meihua.php）

   載入順序：base.css → theme.css（前台）／admin.css（後台）
   base.css 只提供結構，配色與外觀一律由後兩者決定。
   ============================================================ */

/* ============================================================
   最小重設（reboot）
   ------------------------------------------------------------
   Bootstrap 除了格線，還附帶一份 reboot——全站 box-sizing、
   標題與段落的邊距、表單元件繼承字型等。移除 Bootstrap 後
   這些預設必須補回來，否則版面會整體位移（實測：少了
   box-sizing，.container 的 width:100% 加上左右各 15px 內距
   會變成 420px 寬，直接撐出 30px 的橫向捲動）。
   這裡只取站上版面實際倚賴的項目，不整套照搬。
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p { margin-top: 0; margin-bottom: 1rem; }
ul, ol, dl { margin-top: 0; margin-bottom: 1rem; }
hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid currentColor; opacity: .2; }

b, strong { font-weight: bolder; }
small { font-size: 80%; }

table { border-collapse: collapse; }
img { vertical-align: middle; border-style: none; }

label { display: inline-block; margin-bottom: .5rem; }

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
[type="button"],
[type="submit"] { -webkit-appearance: button; }
button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled) { cursor: pointer; }

/* ---------- 容器與 12 欄格線 ---------- */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* 格線用 CSS Grid 實作。
   Bootstrap 以「.row 負邊距 + .col 內距」製造 30px 欄距，
   內容因此正好對齊 .container 的內容框。這裡改用 column-gap，
   不需要負邊距即可得到相同的對齊與欄距，且不會外溢容器。 */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 30px;
}
/* 直向節奏仍由 HTML 既有的 .mb-* 決定，因此 row-gap 保持 0 */
.row > [class*="col-"] { min-width: 0; }

/* 手機：收成單欄。
   ------------------------------------------------------------------
   768px 以下所有 col-* 都是 span 12（見下方 media query），12 欄
   純屬多餘；而 12 欄之間的 11 個 30px 間距本身就要 330px，比 320px
   視窗的內容寬度（290px）還寬，光間距就必然撐破容器。收成單欄後
   不再有軌道間距，也就不會外溢。 */
@media (max-width: 767.98px) {
  .row {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .row > [class*="col-"] { grid-column: 1 / -1; }
}

.col-12 { grid-column: span 12; }
.col-md-6,
.col-md-7,
.col-lg-4,
.col-lg-5,
.col-lg-8 { grid-column: span 12; }

@media (min-width: 768px) {
  .col-md-6 { grid-column: span 6; }
  .col-md-7 { grid-column: span 7; }
}
@media (min-width: 992px) {
  .col-lg-4 { grid-column: span 4; }
  .col-lg-8 { grid-column: span 8; }
  .col-lg-5 { grid-column: span 5; }
}

/* 置中列（登入／註冊表單）：只有一個子項目時，讓它自己置中並限制可讀寬度，
   不必像 Bootstrap 那樣靠 12 欄的奇數分割去硬湊。 */
.row.justify-content-center > [class*="col-"] {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
}
.row.justify-content-center > .col-md-7 { max-width: 620px; }
@media (min-width: 992px) {
  .row.justify-content-center > .col-lg-5 { max-width: 470px; }
}

/* ---------- navbar ---------- */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
/* Bootstrap 的 .navbar > .container 是頂欄排版的核心：
   品牌與收合鈕同一列，收合內容 flex-basis:100% 換到下一列。 */
.navbar > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.sticky-top { position: sticky; top: 0; z-index: 1020; }

.navbar-brand {
  display: inline-block;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
  text-decoration: none;
}

.navbar-toggler {
  display: inline-block;
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: .25rem;
  cursor: pointer;
  color: inherit;
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background: no-repeat center center;
  background-size: 100% 100%;
}

.navbar-collapse { flex-basis: 100%; flex-grow: 1; }

/* 收合：由原生 JS 切換 .show（見 public/js/main.js）。
   沒有 JS 時 .navbar-toggler 無作用，但桌機版仍完整可見；
   手機則在同一個 media query 內直接展開，內容不會消失。 */
.collapse { display: none; }
.collapse.show { display: block; }

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: .5rem 1rem;
  text-decoration: none;
}
.navbar-text {
  display: inline-block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-toggler { display: none; }
  .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-lg .navbar-nav { flex-direction: row; align-items: center; }
  .navbar-expand-lg .mr-auto { margin-right: auto !important; }
  .navbar-expand-lg .ml-lg-2 { margin-left: .5rem !important; }
  .navbar-expand-lg .mr-lg-2 { margin-right: .5rem !important; }
}
@media (max-width: 991.98px) {
  .navbar-expand-lg .navbar-collapse { flex-basis: 100%; }
}

/* ---------- 排版工具類（僅站上實際用到的） ---------- */
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.h-100 { height: 100% !important; }
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mr-auto { margin-right: auto !important; }
.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.p-2 { padding: .5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

.text-center { text-align: center !important; }
.list-unstyled { padding-left: 0; list-style: none; }

/* ---------- 按鈕骨架（配色由 theme.css / admin.css 決定） ---------- */
.btn {
  display: inline-block;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  color: inherit;
  transition: background-color .15s, border-color .15s, filter .15s;
}
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.btn-sm { padding: 5px 14px; font-size: 13.5px; }
.btn-block { display: block; width: 100%; }

/* ---------- 表單與提示框骨架 ---------- */
.form-group { margin-bottom: 1rem; }
.alert {
  position: relative;
  padding: 12px 16px;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 10px;
}