/* CSS Document */

/* ==============================
   Google Sheet 通用費用表格
   ============================== */

/* 外層容器 */
.feeTableWrap {
  width: 100%;
  margin: 20px 0;
  overflow-x: visible; /* 電腦版不要出現橫向 scrollbar */
}

/* 表格本體 */
.feeTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 讓欄寬自動平均壓縮 */
  font-family: Arial, "微軟正黑體", sans-serif;
  font-size: clamp(15px, 1vw, 15px); /* 小畫面自動縮字 */
  color: #111;
}

/* 儲存格 */
.feeTable th,
.feeTable td {
  border: 1px solid #999;
  padding: clamp(8px, 1vw, 13px) clamp(6px, .8vw, 10px);
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere; /* 長字自動斷，不撐出表格 */
}

/* 第一欄 */
.feeTable .cellFirst {
  width: 22%;
}

/* 深色列 / 深色第一欄 */
.feeTable .rowDark th,
.feeTable .rowDark td,
.feeTable .cellDark {
  background: #2f2f2f;
  color: #fff;
  /*font-weight: bold;*/
}

/* 區塊顏色 */
.feeTable .rowPink td,
.feeTable .rowPink th {
  background: #fff0f6;
}

.feeTable .rowCyan td,
.feeTable .rowCyan th {
  background: #dffcff;
}

.feeTable .rowBlue td,
.feeTable .rowBlue th {
  background: #dbe4f4;
}

.feeTable .rowYellow td,
.feeTable .rowYellow th {
  background: #fff3c7;
}

.feeTable .rowGreen td,
.feeTable .rowGreen th {
  background: #e4f1dd;
}

.feeTable .rowGray td,
.feeTable .rowGray th {
  background: #f4f4f4;
}

/* 文字樣式 */
.feeTable .txtRed {
  color: #ff5b5b;
}

.feeTable .txtYellow {
  color: #fff200;
  /*font-weight: bold;*/
}

.feeTable .txtSmall {
  font-size: .92em;
}

.feeTable .txtBold {
  /*font-weight: bold;*/
}

/* ==============================
   平板 / 小桌機：仍然自適應，不出 scrollbar
   ============================== */
@media screen and (min-width: 801px) and (max-width: 1100px) {
  .feeTable {
    font-size: 14px;
  }

  .feeTable th,
  .feeTable td {
    padding: 8px 6px;
    line-height: 1.45;
  }

  .feeTable .cellFirst {
    width: 24%;
  }
}

/* ==============================
   手機版：才啟用左右滑動 + 固定左欄
   ============================== */
@media screen and (max-width: 800px) {
  .feeTableWrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 15px 0;
  }

  .feeTable {
    min-width: 900px; /* 手機版才固定最小寬度，讓右側可滑 */
    font-size: 15px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  .feeTable th,
  .feeTable td {
    padding: 10px 8px;
    line-height: 1.45;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    border-top: 0;
    border-left: 0;
    background: #fff;
  }

  .feeTable tr:first-child th,
  .feeTable tr:first-child td {
    border-top: 1px solid #999;
  }

  .feeTable th:first-child,
  .feeTable td:first-child {
    border-left: 1px solid #999;
  }

 /* 手機版固定最左欄：寬度約 30% */
/* 固定最左欄 */
.feeTable th:first-child,
.feeTable td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;

  /* 約手機畫面 30%，但限制不要太窄或太寬 */
  width: 33vw;
  min-width: 120px;
  max-width: 160px;
}

  /* 表頭左上角 */
  .feeTable tr:first-child th:first-child,
  .feeTable tr:first-child td:first-child {
    z-index: 5;
  }

  /* 手機版重新補回 RowStyle 顏色 */
  .feeTable .cellDark {
    background: #2f2f2f;
    color: #fff;
   /* font-weight: bold;*/
  }

  .feeTable .rowDark th,
  .feeTable .rowDark td {
    background: #2f2f2f;
    color: #fff;
    /*font-weight: bold;*/
  }

  .feeTable .rowPink th,
  .feeTable .rowPink td {
    background: #fff0f6;
  }

  .feeTable .rowCyan th,
  .feeTable .rowCyan td {
    background: #dffcff;
  }

  .feeTable .rowBlue th,
  .feeTable .rowBlue td {
    background: #dbe4f4;
  }

  .feeTable .rowYellow th,
  .feeTable .rowYellow td {
    background: #fff3c7;
  }

  .feeTable .rowGreen th,
  .feeTable .rowGreen td {
    background: #e4f1dd;
  }

  .feeTable .rowGray th,
  .feeTable .rowGray td {
    background: #f4f4f4;
  }

  /* colspan 區塊列不要固定左欄 */
  .feeTable .rowPink td:first-child,
  .feeTable .rowCyan td:first-child,
  .feeTable .rowBlue td:first-child,
  .feeTable .rowYellow td:first-child,
  .feeTable .rowGreen td:first-child,
  .feeTable .rowGray td:first-child {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  /* 深色優先 */
  .feeTable .rowDark th:first-child,
  .feeTable .rowDark td:first-child,
  .feeTable th.cellDark,
  .feeTable td.cellDark {
    background: #2f2f2f;
    color: #fff;
  }
}