/* ============================================================
   計算機工具頁共用樣式（搭配 style.css 使用）
   ============================================================ */

.tool-layout {
  display: grid; grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr);
  gap: 28px; align-items: start;
}
@media (max-width: 860px) { .tool-layout { grid-template-columns: 1fr; } }

.tool-panel {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 28px;
}
.tool-panel h2 { font-size: 1.15rem; margin-bottom: 18px; }

.tool-panel label { display: block; font-weight: 700; font-size: .9rem; margin: 16px 0 6px; color: var(--navy); }
.tool-panel label .hint { font-weight: 400; color: var(--ink-soft); font-size: .8rem; }
.tool-panel input[type="number"], .tool-panel input[type="text"], .tool-panel input[type="date"], .tool-panel select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px;
  font-family: inherit; font-size: 1rem; background: var(--paper);
}
.tool-panel input:focus, .tool-panel select:focus { outline: none; border-color: var(--gold); }
.tool-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tool-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-radio label {
  flex: 1; min-width: 90px; margin: 0; text-align: center; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 8px;
  font-weight: 500; font-size: .9rem; background: var(--paper);
}
.tool-radio input { display: none; }
.tool-radio label:has(input:checked) {
  border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700;
}

.tool-calc-btn { width: 100%; margin-top: 24px; }

/* 結果區 */
.result-empty { text-align: center; color: var(--ink-soft); padding: 60px 20px; }
.result-empty .icon { font-size: 2.6rem; margin-bottom: 12px; }

.result-headline {
  background: linear-gradient(120deg, var(--navy), var(--navy-3));
  color: #fff; border-radius: 12px; padding: 22px 24px; margin-bottom: 18px;
}
.result-headline .rh-label { font-size: .85rem; color: #c9d5e3; }
.result-headline .rh-value { font-size: 1.9rem; font-weight: 700; font-family: "Noto Serif TC", serif; color: var(--gold-light); }
.result-headline .rh-sub { font-size: .85rem; color: #c9d5e3; margin-top: 4px; }

.result-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.result-table td { padding: 9px 6px; border-bottom: 1px dashed var(--line); }
.result-table td:last-child { text-align: right; font-weight: 700; color: var(--navy); white-space: nowrap; }
.result-table tr.rt-section td { font-weight: 700; color: var(--gold); border-bottom: 1.5px solid var(--gold); padding-top: 16px; }
.result-table tr.rt-total td { font-size: 1.02rem; border-bottom: none; border-top: 2px solid var(--navy); color: var(--navy); }
.result-table td .sub { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-soft); }

.result-note { font-size: .82rem; color: var(--ink-soft); margin-top: 14px; line-height: 1.7; }

/* 工具頁 CTA */
.tool-cta {
  margin-top: 20px; background: #fdf8ec; border: 1.5px solid var(--gold-light);
  border-radius: 12px; padding: 18px 20px;
}
.tool-cta p { font-size: .92rem; margin-bottom: 12px; }
.tool-cta p strong { color: var(--navy); }

/* 工具總覽卡 */
.tool-card { position: relative; display: flex; flex-direction: column; }
.tool-card .tag {
  position: absolute; top: 18px; right: 18px; font-size: .72rem;
  padding: 2px 10px; border-radius: 999px; font-weight: 700;
}
.tool-card .tag.hot { background: var(--gold); color: var(--navy); }
.tool-card .tag.soon { background: #eef1f5; color: var(--ink-soft); }
.tool-card .aud-line { font-size: .78rem; color: var(--navy-3); margin-top: 10px; }

/* 健檢測驗 */
.quiz-q { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; margin-bottom: 18px; }
.quiz-q h3 { font-size: 1.02rem; margin-bottom: 14px; }
.quiz-progress { text-align: center; color: var(--ink-soft); font-size: .85rem; margin-bottom: 20px; }
.risk-meter { height: 14px; border-radius: 999px; background: #e8e4da; overflow: hidden; margin: 14px 0; }
.risk-meter > div { height: 100%; border-radius: 999px; transition: width .6s; }

/* 行事曆 */
.cal-month { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; }
.cal-month h3 { color: var(--gold); font-size: 1rem; border-bottom: 1.5px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.cal-month ul { list-style: none; }
.cal-month li { font-size: .88rem; padding: 5px 0; display: flex; gap: 8px; }
.cal-month li .d { font-weight: 700; color: var(--navy); white-space: nowrap; min-width: 74px; }
.cal-month.current { border-top: 3px solid var(--gold); }