/* ============================================================
   人工膝關節術後居家復健工具 (knee-rehab.css)
   載入順序：design.css 之後。只在有 .kr 的頁面載入。

   遵守 DESIGN.md：思源黑體一套打完、內文 18px／行高 1.95、
   圓角 10px（小元件 6px）、靜態無陰影、珊瑚紅覆蓋率 < 5%
   （只留給警訊區塊，語意上是「警示」不是「主要」）。
   ============================================================ */

.kr {
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 2rem 1.75rem;
  margin: 3rem 0;
}

.kr-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
  color: var(--ink);
}

.kr-lede {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-70);
  margin: 0 0 1.5rem;
}

/* ── 進度 ───────────────────────────────────────── */

.kr-progress {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.kr-bar {
  flex: 1;
  height: 4px;
  background: var(--hair);
  border-radius: 999px;
  overflow: hidden;
}

.kr-bar i {
  display: block;
  height: 100%;
  background: var(--indigo);
  border-radius: 999px;
  transition: width 0.28s ease;
}

.kr-stepno {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-50);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 題目 ───────────────────────────────────────── */

.kr-step {
  border: 0;
  padding: 0;
  margin: 0;
}

.kr-step legend {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.6rem;
}

.kr-hint {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-70);
  margin: 0 0 1.2rem;
}

.kr-opts {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 760px) {
  /* 五個選項以上就排兩欄（:has 支援度足夠，不支援時退回一欄也不會壞） */
  .kr-opts:has(> :nth-child(5)) { grid-template-columns: repeat(2, 1fr); }
}

.kr-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  background: var(--paper);
  cursor: pointer;
}

.kr-opt:hover { border-color: var(--indigo); }

.kr-opt input {
  margin-top: 0.35rem;
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--indigo);
}

.kr-opt span { display: block; }

.kr-opt b {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}

.kr-opt small {
  display: block;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-50);
  margin-top: 0.15rem;
}

.kr-opt:has(input:checked) {
  border-color: var(--indigo);
  background: var(--indigo-wash);
}

.kr-opts-flag .kr-opt:has(input:checked) {
  border-color: var(--vermilion);
  background: var(--vermilion-wash);
}

.kr-opts-flag .kr-opt-none:has(input:checked) {
  border-color: var(--indigo);
  background: var(--indigo-wash);
}

/* ── 按鈕 ───────────────────────────────────────── */

/* 題目區：撐成一樣高，按鈕才不會隨著選項多寡上下跑 */
.kr-step { min-height: var(--kr-step-h, 430px); }

/* 按鈕列：吸在畫面底部。題目再長，按鈕都在同一個位置 */
.kr-nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 1.5rem -1.75rem -2rem;
  padding: 0.9rem 1.75rem 1rem;
  background: var(--sheet);
  border-top: 1px solid var(--hair);
}

.kr-btn {
  /* 按鈕系統：三個層級（主要／次要／安靜），差別只在底色與邊框，
     尺寸、圓角、字重完全一致，排在一起才不會像拼湊的。 */
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 52px;
  padding: 0 1.6rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: var(--sheet);
  color: var(--indigo-ink);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, transform 0.12s ease, color 0.18s ease;
}

/* 鍵盤操作看得見焦點（長輩、輔具使用者都需要） */
.kr-btn:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 3px;
}

/* 按下去有一點點下沉，回饋感 */
.kr-btn:active { transform: translateY(1px); }

.kr-btn[disabled] {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ── 主要：一個畫面只放一顆 ─────────────────── */
.kr-btn.kr-btn-primary,
.kr-btn.kr-go,
.kr-btn.kr-btn-go {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

.kr-btn.kr-btn-primary:hover,
.kr-btn.kr-go:hover,
.kr-btn.kr-btn-go:hover {
  background: var(--indigo-ink);
  border-color: var(--indigo-ink);
  box-shadow: 0 6px 18px rgba(0, 126, 167, 0.24);
  transform: translateY(-1px);
}

.kr-btn.kr-btn-primary:active,
.kr-btn.kr-go:active,
.kr-btn.kr-btn-go:active { transform: translateY(1px); box-shadow: none; }

/* ── 次要：白底細框，hover 才上淡藍 ─────────── */
.kr-back,
.kr-restart,
.kr-print,
.kr-btn-lg,
.kr-again,
.kr-close {
  background: var(--sheet);
  border-color: var(--hair-strong);
  color: var(--indigo-ink);
}

.kr-back:hover,
.kr-restart:hover,
.kr-print:hover,
.kr-btn-lg:hover,
.kr-again:hover,
.kr-close:hover {
  background: var(--indigo-wash);
  border-color: var(--indigo);
  box-shadow: 0 4px 14px rgba(22, 50, 63, 0.08);
  transform: translateY(-1px);
}

/* ── 安靜：停止鍵，不搶戲但點得到 ───────────── */
.kr-btn-sm {
  background: transparent;
  border-color: var(--hair);
  color: var(--ink-70);
  font-weight: 500;
  padding: 0 1.1rem;
}

.kr-btn-sm:hover {
  background: var(--paper-2);
  border-color: var(--hair-strong);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.kr-go { margin-left: auto; }

.kr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ── 結果 ───────────────────────────────────────── */

.kr-card {
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  padding: 1.5rem 1.35rem;
  margin-bottom: 1rem;
}

.kr-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.kr-kicker {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--indigo);
  margin: 0 0 0.35rem;
}

.kr-facts { margin: 0; }

.kr-facts > div {
  padding: 0.85rem 0;
  border-top: 1px solid var(--hair);
}

.kr-facts > div:first-child { border-top: 0; padding-top: 0; }

.kr-facts dt {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-50);
  margin-bottom: 0.25rem;
}

.kr-facts dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink);
}

.kr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.kr-table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-50);
  padding: 0 0.6rem 0.6rem 0;
  border-bottom: 1px solid var(--hair-strong);
}

.kr-table td {
  padding: 0.85rem 0.6rem 0.85rem 0;
  border-bottom: 1px solid var(--hair);
  line-height: 1.8;
  vertical-align: top;
  color: var(--ink);
}

.kr-table td:first-child { white-space: nowrap; }
.kr-dose { color: var(--ink-70); white-space: nowrap; }

.kr-sub {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  margin: 1.2rem 0 0;
}

.kr-notes {
  margin: 0;
  padding-left: 1.2rem;
}

.kr-notes li {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.kr-notes li:last-child { margin-bottom: 0; }

/* 警示：珊瑚紅只用在這裡 */

.kr-card-warn,
.kr-card-stop {
  border-color: var(--vermilion);
  background: var(--vermilion-wash);
}

.kr-card-warn h3,
.kr-stop-head { color: #9c3423; }

.kr-stop-head {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.85rem;
}

.kr-card-stop p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ink);
}

.kr-flaglist {
  margin: 1rem 0;
  padding-left: 1.2rem;
}

.kr-flaglist li {
  line-height: 1.85;
  margin-bottom: 0.75rem;
}

.kr-flaglist small { color: var(--ink-70); font-size: 0.95rem; }

.kr-stop-foot {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(224, 90, 69, 0.35);
}

.kr-disclaimer,
.kr-note {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-70);
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
}

.kr sup {
  font-size: 0.72em;
  font-weight: 500;
  color: var(--indigo);
  vertical-align: super;
  line-height: 0;
}

/* ── 手機 ───────────────────────────────────────── */

@media (max-width: 560px) {
  .kr { padding: 1.5rem 1.1rem; margin-left: -0.5rem; margin-right: -0.5rem; }

  /* 手機：表單至少一個螢幕高，吸底按鈕才會永遠貼在畫面底部；
     題目區用 flex 撐開剩餘空間，短題目也不會讓按鈕往上跑。 */
  .kr-form {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 7rem);
  }
  .kr-step { min-height: 0; flex: 1 1 auto; }
  .kr-nav {
    flex-direction: column-reverse;
    margin: 1.25rem -1.1rem -1.5rem;
    padding: 0.8rem 1.1rem 0.9rem;
  }
  .kr-go { margin-left: 0; }
  .kr-btn { width: 100%; }
  .kr-card { padding: 1.2rem 1rem; }

  /* 表格在窄螢幕改成卡片式堆疊，不橫向捲動 */
  .kr-table, .kr-table tbody, .kr-table tr, .kr-table td { display: block; width: 100%; }
  .kr-table thead { display: none; }
  .kr-table tr { padding: 0.9rem 0; border-bottom: 1px solid var(--hair); }
  .kr-table td { border: 0; padding: 0.15rem 0; white-space: normal; }
  .kr-table td:first-child { white-space: normal; }
  .kr-dose { white-space: normal; font-size: 0.95rem; }
  .kr-dose::before { content: "次數："; color: var(--ink-50); }
}

/* ── 列印 ───────────────────────────────────────── */

@media print {
  .nav, .site-foot, .kr-actions, .kr-progress, .back, .qa { display: none !important; }
  .kr { border: 0; padding: 0; margin: 0; }
  .kr-card { break-inside: avoid; background: #fff; }
  body { font-size: 12pt; }
}

/* ============================================================
   動作卡
   ─ 手機：一個動作剛好一個螢幕，往下滑就是下一個動作
   ─ 電腦：三個動作左右並排，等高
   ─ 計時盒高度固定，按下去版面不會跳
   ============================================================ */

.kr-card-lead .kr-cheer {
  font-size: 1.1rem;
  line-height: 1.95;
  color: var(--ink);
  margin: 0 0 1.2rem;
}

.kr-movehead { margin: 2rem 0 1rem; }

.kr-movehead h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.4rem;
  color: var(--ink);
}

.kr-movehead .kr-sub { margin: 0; }

.kr-moves { display: grid; gap: 1rem; }

.kr-move {
  display: flex;
  flex-direction: column;
  padding: 1.1rem;
  background: var(--sheet);
  border: 1px solid var(--hair);
  border-radius: 10px;
}

/* 插圖：底色配合插畫的米白，圖不裁切、不變形 */
.kr-move-fig {
  margin: 0 0 0.9rem;
  background: #f7f3ea;
  border-radius: 8px;
  overflow: hidden;
}

.kr-move-fig img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.kr-move h4 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 0.3rem;
  color: var(--ink);
}

.kr-move-no {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.kr-move-why {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--indigo-ink);
  margin: 0 0 0.7rem;
}

.kr-move-steps {
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
  flex: 1 1 auto;
}

.kr-move-steps li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

/* ── 計時盒：高度固定，內容換但框不動 ─────────── */

.kr-timer {
  flex: none;
  height: 268px;              /* 固定高度：內容換，框不動 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  border: 1px solid var(--indigo);
  border-radius: 10px;
  padding: 1rem 0.9rem;
  text-align: center;
  background: var(--indigo-wash);
}

.kr-t-phase {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--indigo-ink);
  margin: 0;
}

.kr-t-ok { color: #1c7a4f; }

.kr-t-num {
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--indigo-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.kr-t-num small {
  font-size: 1.05rem;
  font-weight: 400;
  margin-left: 0.2rem;
}

.kr-t-say {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 0.7rem;
  height: 3.6em;              /* 固定高度：訊息長短不一，框也不會跳 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.kr-t-say b { font-size: 1.25rem; color: var(--indigo-ink); }

.kr-t-btns {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.kr-btn-lg {
  flex: 1 1 auto;
  min-height: 56px;
  font-size: 1.1rem;
}

.kr-t-btns .kr-btn-sm {
  flex: 0 0 auto;
  min-height: 56px;
}


.kr-timer-plain { background: var(--paper-2); border-color: var(--hair); }
.kr-timer-plain .kr-t-phase { color: var(--ink-70); }
.kr-timer-plain .kr-t-say { margin: 0; }

/* ── 電腦：三個並排 ─────────────────────────── */

@media (min-width: 900px) {
  /* 三張卡要有呼吸空間，所以讓這一區塊掙脫文章的窄欄寬 */
  .kr-moves {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    width: min(1180px, calc(100vw - 5rem));
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .kr-move { padding: 1.2rem; }
  .kr-move-steps li { font-size: 1rem; }
}

/* ── 手機：一個動作佔滿一個畫面 ───────────────── */

@media (max-width: 899px) {
  .kr-moves {
    gap: 0.75rem;
    scroll-snap-type: y proximity;
  }
  .kr-move {
    min-height: calc(100svh - 5rem);
    scroll-snap-align: center;
    justify-content: center;
  }
  .kr-move-fig img { aspect-ratio: 3 / 2; max-height: 34svh; }
  .kr-move-steps { flex: 0 0 auto; }
  .kr-timer { height: 252px; }
}

@media (max-width: 380px) {
  .kr-t-num { font-size: 3rem; }
  .kr-move-steps li { font-size: 1rem; }
}

/* ── 列印：只留圖與步驟 ─────────────────────── */

@media print {
  .kr-timer { display: none !important; }
  .kr-moves { display: block; }
  .kr-move {
    min-height: 0;
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
  }
  .kr-move-fig img { max-height: 5cm; }
}

/* 矮一點的手機（iPhone SE 等 667px 以下）：等比收緊，仍維持一頁一動作 */
@media (max-width: 899px) and (max-height: 745px) {
  .kr-move { padding: 0.85rem; min-height: calc(100svh - 3.5rem); }
  .kr-move-fig { margin-bottom: 0.6rem; }
  .kr-move-fig img { max-height: 23svh; }
  .kr-move h4 { font-size: 1.15rem; margin-bottom: 0.2rem; }
  .kr-move-why { font-size: 0.95rem; line-height: 1.7; margin-bottom: 0.5rem; }
  .kr-move-steps { margin-bottom: 0.6rem; }
  .kr-move-steps li { font-size: 0.98rem; line-height: 1.7; }
  .kr-timer { height: 206px; padding: 0.7rem; }
  .kr-t-phase { font-size: 1.05rem; }
  .kr-t-num { font-size: 2.6rem; }
  .kr-t-say { height: 2.8em; font-size: 0.95rem; margin-bottom: 0.5rem; }
  .kr-btn-lg, .kr-btn-sm { min-height: 50px; }
}