/* =========================
   Table: Dose (SK-189 / SK-160 類型都能用)
   ========================= */

.table.table--dose {
  width: min(100%, 1020px);
  margin: 0 auto;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.table.table--dose .table__head {
  background: #f6f6f6;
}

.table.table--dose .table__header {
  padding: 14px 16px;
  font-weight: 800;
  text-align: left;
  border-bottom: 1px solid #e9e9e9;
  letter-spacing: .02em;
  font-size: clamp(14px, 1.2vw, 16px);
}

.table.table--dose .table__row:nth-child(even) {
  background: #fcfcfc;
}

.table.table--dose .table__data {
  padding: 14px 16px;
  border-top: 1px solid #ededed;
  vertical-align: top;
  line-height: 1.6;
  font-size: clamp(14px, 1.2vw, 16px);
}

/* ---- 重點層級 ---- */
.table.table--dose .cell-title {
  font-weight: 800;
}

.table.table--dose .cell-text {
  color: #222;
}

.table.table--dose .cell-note {
  margin-top: 4px;
  color: #6b6b6b;
  font-size: 0.92em;
}

.table.table--dose .mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ppm badge */
.table.table--dose .pill {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #dedede;
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
}

.table.table--dose .pill--strong {
  border-color: #cfcfcf;
  background: #f4f4f4;
}

/* ---- 左側階段色條：一眼看懂 ---- */
.table.table--dose .dose-row {
  position: relative;
}

.table.table--dose .dose-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
}

.table.table--dose .dose-row--init::before { background: #111; }
.table.table--dose .dose-row--maintain::before { background: #888; }
.table.table--dose .dose-row--daily::before { background: #c9c9c9; }

/* 讓左側色條不擋內容 */
.table.table--dose .dose-row > .table__data:first-child {
  padding-left: 20px;
}

/* ---- Mobile：自動卡片化 ---- */
@media (max-width: 820px) {
  .table.table--dose {
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .table.table--dose .table__head {
    display: none;
  }

  .table.table--dose,
  .table.table--dose .table__body,
  .table.table--dose .table__row,
  .table.table--dose .table__data {
    display: block;
    width: 100%;
  }

  .table.table--dose .table__row {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    margin: 12px 0;
    overflow: hidden;
  }

  .table.table--dose .table__data {
    border: none;
    padding: 12px 14px;
  }

  .table.table--dose .table__data::before {
    content: attr(data-label);
    display: block;
    font-size: 0.82em;
    color: #777;
    margin-bottom: 6px;
    letter-spacing: .02em;
  }

  .table.table--dose .dose-row > .table__data:first-child {
    padding-left: 14px;
  }

  .table.table--dose .dose-row::before {
    width: 6px;
  }
}


@media (max-width: 820px) {
  .table.table--dose .table__data::before {
    font-weight: 700;
    text-transform: none;
  }
}