/*
 * base.css — 原生 CSS 基礎層
 * 只保留本站實際用到的：
 * reset、rem 根字級、12 欄 flex grid、少數工具類與表單/按鈕/分頁元件。
 * 其餘元件樣式仍由 style.min.css 提供（本檔須在 style.min.css 之前載入）。
 */

/* ===== Reset / Base ===== */
html {
  box-sizing: border-box;
  font-size: 20px;      /* rem 基準：全站尺寸皆以此為基礎 */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  font-size: 0.8rem;
  color: #50596c;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  color: inherit;
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin: 0 0 1.2rem;
}
ul {
  list-style: disc inside;
}
ol {
  list-style: decimal inside;
}
ol, ul {
  margin: 0.8rem 0 0.8rem 0.8rem;
  padding: 0;
}
img {
  border-style: none;
}
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
}

/* ===== 12 欄 Flex Grid ===== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.4rem;
  margin-right: -0.4rem;
}
.columns.col-gapless {
  margin-left: 0;
  margin-right: 0;
}
.columns.col-gapless > .column {
  padding-left: 0;
  padding-right: 0;
}
.column {
  flex: 1;
  max-width: 100%;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
/* 固定寬度欄（一旦指定 col-N 便停止彈性伸縮） */
.column.col-1, .column.col-2, .column.col-3, .column.col-4,
.column.col-5, .column.col-6, .column.col-7, .column.col-8,
.column.col-9, .column.col-10, .column.col-11, .column.col-12 {
  flex: none;
}
.col-1  { width: 8.33333333%; }
.col-2  { width: 16.66666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.33333333%; }
.col-5  { width: 41.66666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.33333333%; }
.col-8  { width: 66.66666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }

/* md 斷點：平板／窄視窗 */
@media (max-width: 840px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4,
  .col-md-5, .col-md-6, .col-md-7, .col-md-8,
  .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    flex: none;
  }
  .col-md-12 { width: 100%; }
}
/* sm 斷點：手機 */
@media (max-width: 600px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4,
  .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8,
  .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    flex: none;
  }
  .col-sm-12 { width: 100%; }
}

/* ===== 工具類 ===== */
.text-center { text-align: center; }
.text-gray   { color: #acb3c2; }
.bg-gray     { background: #f8f9fa; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.4rem !important; }
.mt-2 { margin-top: 0.4rem !important; }
.pt-2 { padding-top: 0.4rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-2 { padding-left: 0.4rem !important; padding-right: 0.4rem !important; }

/* ===== 排版輔助類 ===== */
.h3, .h5 { font-weight: 500; }
.h3, h3  { font-size: 1.4rem; }
.h5, h5  { font-size: 1rem; }

/* ===== 卡片 (card) ===== */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 0.05rem solid #e7e9ed;
  border-radius: 0.1rem;
}
.card .card-header,
.card .card-body,
.card .card-footer {
  padding: 0.8rem;
  padding-bottom: 0;
}
.card .card-header:last-child,
.card .card-body:last-child,
.card .card-footer:last-child {
  padding-bottom: 0.8rem;
}
.card .card-body {
  flex: 1 1 auto;
}

/* ===== 按鈕 ===== */
.btn {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0.05rem solid #5755d9;
  border-radius: 0.1rem;
  color: #5755d9;
  cursor: pointer;
  display: inline-block;
  font-size: 0.8rem;
  height: 1.8rem;
  line-height: 1.2rem;
  outline: 0;
  padding: 0.25rem 0.4rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
.btn.btn-primary {
  background: #5755d9;
  border-color: #4b48d6;
  color: #fff;
}
.btn.btn-primary:focus,
.btn.btn-primary:hover {
  background: #4240d4;
  border-color: #3634d2;
  color: #fff;
}
.btn.btn-lg {
  font-size: 0.9rem;
  height: 2rem;
  padding: 0.35rem 0.6rem;
}

/* ===== 表單 / input-group ===== */
.form-input {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0.05rem solid #caced7;
  border-radius: 0.1rem;
  color: #50596c;
  display: block;
  font-size: 0.8rem;
  height: 1.8rem;
  line-height: 1.2rem;
  max-width: 100%;
  outline: 0;
  padding: 0.25rem 0.4rem;
  transition: all 0.2s ease;
  width: 100%;
}
.form-input:focus {
  border-color: #5755d9;
  box-shadow: 0 0 0 0.1rem rgba(87, 85, 217, 0.2);
}
.form-input.input-lg {
  font-size: 0.9rem;
  height: 2rem;
  padding: 0.35rem 0.6rem;
}
.input-group {
  display: flex;
}
.input-group .form-input {
  flex: 1 1 auto;
  width: 1%;
}
.input-group .input-group-btn {
  z-index: 1;
}
/* 相鄰邊角切平 */
.input-group .form-input:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group .input-group-btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ===== 分頁 (pagination) ===== */
.pagination {
  display: flex;
  list-style: none;
  margin: 0.2rem 0;
  padding: 0.2rem 0;
}
.pagination .page-item {
  margin: 0.2rem 0.05rem;
}
.pagination .page-item span {
  display: inline-block;
  padding: 0.2rem 0.2rem;
}
.pagination .page-item a {
  display: inline-block;
  border-radius: 0.1rem;
  color: #667189;
  padding: 0.2rem 0.4rem;
  text-decoration: none;
}
.pagination .page-item a:focus,
.pagination .page-item a:hover {
  color: #5755d9;
}
.pagination .page-item.page-prev,
.pagination .page-item.page-next {
  flex: 1 0 50%;
}
.pagination .page-item.page-next {
  text-align: right;
}
.pagination .page-item .page-item-title {
  margin: 0;
}