/* base */
.keydata-body {
  font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(160deg, #fdfdfd 0%, #fdfdfd 100%);
  color: #0b1320;
  /* 以深色字為主，內容段落用 .text-secondary 控制 */
  width: 100%;
}

/* 章節進場動畫 */
.story-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.story-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 中線時間軸 */
.timeline {
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background-color: rgba(17, 3, 3, 0.1);
  border-radius: 2px;
}

/* 數字跳動動畫 */
@keyframes count-up {
  from {
    transform: translateY(15px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.counter {
  animation: count-up 0.5s ease-out forwards;
}

/* 按鈕與載入樣式（可選） */
.gemini-btn {
  background: linear-gradient(45deg, #fdfdfd, #fdfdfd);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gemini-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4);
}

#gemini-modal.hidden {
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

/* —— 色塊／半透明背景（取代 Tailwind 的 bg-*-700/50） —— */
.bg-soft-orange {
  background-color: rgba(234, 88, 12, 0.5);
}

/* 橘 */
.bg-soft-lime {
  background-color: rgba(101, 163, 13, 0.5);
}

/* 萊姆綠 */
.bg-soft-green {
  background-color: rgba(22, 163, 74, 0.5);
}

/* 綠 */
.bg-soft-slate {
  background-color: rgba(100, 116, 139, 0.5);
}

/* 石板灰 */
.bg-soft-yellow {
  background-color: rgba(250, 204, 21, 0.5);
}

/* 黃 */
.bg-soft-amber {
  background-color: rgba(245, 158, 11, 0.5);
}

/* 琥珀 */
.bg-soft-pink {
  background-color: rgba(236, 72, 153, 0.5);
}

/* 粉紅 */
.bg-soft-blue {
  background-color: rgba(29, 78, 216, 0.5);
}

/* 藍 */
.bg-soft-red {
  background-color: rgba(220, 38, 38, 0.5);
}

/* 紅 */

/* 共用卡片外觀（圓角、陰影、內距） */
.stat-card {
  border-radius: 1rem;
  /* ≈ rounded-2xl */
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  /* p-6 */
}

.stat-card-lg {
  padding: 2rem;
}

/* p-8 */
.minw-150 {
  min-width: 150px;
}

/* 讓中線在手機時不擋住內容（可選） */
@media (max-width: 767.98px) {
  .timeline::before {
    left: 8px;
    transform: none;
  }
}