/* ================================================
   Hand-drawn 風格疊加層
   給簡約科技風加一點手感、溫度
   ================================================ */

/* 引入手寫感字型 */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Kalam:wght@400;700&display=swap');

:root {
  --font-hand: "Caveat", "Kalam", cursive;
}

/* ───── 手繪底線：放在標題下方強調 ───── */
.hd-underline {
  position: relative;
  display: inline-block;
}
.hd-underline::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  bottom: -10px;
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M2 8 Q 30 2, 60 6 T 120 5 T 180 7 T 240 5 T 298 7' stroke='%233ec79a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.85;
}

/* 加粗款 */
.hd-underline-bold::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M3 9 Q 40 2, 80 8 T 160 6 T 240 8 T 297 6' stroke='%230d4f4a' stroke-width='4' fill='none' stroke-linecap='round' stroke-linejoin='round'/><path d='M5 11 Q 50 5, 100 9 T 200 7 T 295 9' stroke='%230d4f4a' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.5'/></svg>");
}

/* ───── 手繪圈圈：圈住重點關鍵字 ───── */
.hd-circle {
  position: relative;
  display: inline-block;
  padding: 2px 14px;
  z-index: 1;
}
.hd-circle::before {
  content: "";
  position: absolute;
  inset: -8px -10px -6px -10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70' preserveAspectRatio='none'><path d='M30 12 Q 8 14, 6 35 Q 4 58, 35 62 Q 100 66, 180 60 Q 214 56, 213 35 Q 213 14, 185 10 Q 110 4, 30 12' stroke='%233ec79a' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  opacity: 0.85;
}

/* ───── 手繪箭頭：右指 ───── */
.hd-arrow {
  display: inline-block;
  width: 64px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 24'><path d='M4 12 Q 18 8, 32 13 T 56 12 M 50 6 L 58 13 L 50 19' stroke='%230d4f4a' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* ───── 手繪打勾 ───── */
.hd-check {
  display: inline-block;
  width: 24px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13 Q 7 17, 10 18 Q 13 14, 16 9 T 21 4' stroke='%233ec79a' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* ───── 手繪標籤 / 便利貼 ───── */
.hd-tag {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 6px 16px 8px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border-radius: 4px 18px 6px 14px;
  transform: rotate(-1.5deg);
  box-shadow: 2px 3px 0 rgba(13,79,74,0.12);
  position: relative;
}

/* ───── 手寫風註記 ───── */
.hd-note {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.4;
  transform: rotate(-1deg);
  display: inline-block;
}

.hd-note-arrow {
  position: relative;
  padding-left: 56px;
}
.hd-note-arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 48px; height: 24px;
  transform: translateY(-50%) rotate(8deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24'><path d='M4 12 Q 16 6, 30 10 T 44 13 M 36 8 L 44 13 L 38 19' stroke='%230d4f4a' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
}

/* ───── 手繪分隔波浪 ───── */
.hd-divider {
  width: 100%; height: 28px;
  margin: 24px 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 28' preserveAspectRatio='none'><path d='M0 14 Q 60 4, 120 14 T 240 14 T 360 14 T 480 14 T 600 14 T 720 14 T 800 14' stroke='%23dfe7e4' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ───── 手繪框：圈選整段內容 ───── */
.hd-box {
  position: relative;
  padding: 32px 36px;
}
.hd-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'><path d='M20 8 Q 200 4, 388 10 Q 396 14, 394 80 Q 396 160, 388 188 Q 200 196, 12 190 Q 4 188, 6 100 Q 4 16, 20 8 Z' stroke='%230d4f4a' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ───── 手繪數字圈：包住重點數字 ───── */
.hd-num-circle {
  position: relative;
  display: inline-block;
  padding: 6px 18px;
  z-index: 1;
}
.hd-num-circle::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90' preserveAspectRatio='none'><circle cx='70' cy='45' r='62' stroke='%233ec79a' stroke-width='3' fill='none' stroke-dasharray='3 0' transform='rotate(-5 70 45)' opacity='0.9'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

/* ───── 手繪 star / 星號裝飾 ───── */
.hd-star {
  display: inline-block;
  width: 20px; height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2 Q 11 8, 17 10 Q 11 12, 10 18 Q 9 12, 3 10 Q 9 8, 10 2' fill='%233ec79a' opacity='0.8'/></svg>");
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* ───── 強調文字：手寫感斜體 ───── */
.hd-text {
  font-family: var(--font-hand);
  color: var(--color-primary);
}
.hd-quote {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--color-primary);
  line-height: 1.5;
  transform: rotate(-0.5deg);
  display: inline-block;
}

/* ───── 卡片手繪邊框 ───── */
.hd-card {
  background: #fff;
  position: relative;
  padding: 32px;
  border-radius: 16px;
}
.hd-card::before {
  content: "";
  position: absolute;
  inset: -6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'><path d='M16 6 Q 200 2, 392 8 Q 397 12, 394 150 Q 397 290, 388 296 Q 200 300, 8 294 Q 3 290, 6 150 Q 3 10, 16 6 Z' stroke='%230d4f4a' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.25'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ───── pillars 加上手繪圈與標號 ───── */
.pillar-hd {
  position: relative;
}
.pillar-hd .pillar-number {
  position: absolute;
  top: -18px; left: -10px;
  font-family: var(--font-hand);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.65;
  line-height: 1;
  z-index: 0;
}

/* ───── 段落間裝飾分隔（手寫線條） ───── */
.hd-section-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 40px 0;
}
.hd-section-mark::before,
.hd-section-mark::after {
  content: "";
  width: 80px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14' preserveAspectRatio='none'><path d='M2 7 Q 20 3, 40 8 T 78 7' stroke='%230d4f4a' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.4'/></svg>");
  background-repeat: no-repeat;
}
.hd-section-mark .icon {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--color-primary);
  opacity: 0.7;
}

/* ───── 三大支柱手繪連線 ───── */
.three-pillars-hd {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}
@media (max-width: 800px) { .three-pillars-hd { grid-template-columns: 1fr; gap: 24px; } }

.pillar-card-hd {
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s var(--ease);
}
.pillar-card-hd:hover {
  transform: translateY(-6px) rotate(-0.3deg);
  border-color: var(--color-accent);
  box-shadow: 0 20px 50px rgba(13,79,74,0.12);
}
.pillar-card-hd .pillar-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  position: relative;
}
.pillar-card-hd .pillar-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(6,47,44,0.7) 100%);
}
.pillar-card-hd .pillar-tag {
  position: absolute;
  top: 18px; right: 18px;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  width: 48px; height: 48px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-8deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 2;
}
.pillar-card-hd .pillar-body {
  padding: 28px 28px 32px;
}
.pillar-card-hd .pillar-body h3 {
  font-size: 1.4rem;
  margin: 0 0 14px;
  display: inline-block;
}
.pillar-card-hd .pillar-body p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0;
}

/* ───── Executor vs 接案者 比較表 (手繪風) ───── */
.exec-diff {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--color-ink);
  box-shadow: 8px 8px 0 rgba(13,79,74,0.08);
  position: relative;
}
.exec-diff .exec-row {
  display: contents;
}
.exec-diff .exec-cell {
  padding: 20px 24px;
  border-bottom: 1.5px dashed var(--color-line);
  font-size: 0.95rem;
  line-height: 1.7;
}
.exec-diff .exec-row:last-child .exec-cell { border-bottom: none; }
.exec-diff .exec-cell.label {
  background: var(--color-bg-muted);
  font-weight: 700;
  color: var(--color-ink);
  border-right: 2px dashed var(--color-line);
}
.exec-diff .exec-cell.others {
  color: var(--color-ink-muted);
  border-right: 1.5px dashed var(--color-line);
  text-decoration: line-through;
  text-decoration-color: rgba(196,68,68,0.3);
  text-decoration-thickness: 1.5px;
}
.exec-diff .exec-cell.us {
  background: rgba(62,199,154,0.06);
  color: var(--color-primary-dark);
  font-weight: 600;
  position: relative;
}
.exec-diff .header-row .exec-cell {
  background: var(--color-primary-dark);
  color: #fff;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  font-weight: 700;
  border-bottom: 2px solid var(--color-ink);
  text-align: center;
}
.exec-diff .header-row .label { color: rgba(255,255,255,0.7); background: var(--color-primary-dark); font-size: 1rem; }
.exec-diff .header-row .us { background: var(--color-accent); color: var(--color-primary-dark); }

@media (max-width: 800px) {
  .exec-diff { grid-template-columns: 1fr; }
  .exec-diff .exec-cell { border-right: none !important; }
  .exec-diff .exec-cell.label { background: var(--color-primary-dark); color: #fff; font-family: var(--font-hand); font-size: 1.3rem; padding: 14px 20px; }
  .exec-diff .header-row { display: none; }
}

/* ───── 歷史時間軸（手繪風） ───── */
.history-timeline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 0;
}
.history-item {
  background: #fff;
  border: 1.5px solid var(--color-line);
  border-radius: 16px;
  padding: 28px 32px;
  position: relative;
  transition: all 0.3s var(--ease);
}
.history-item:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 12px 32px rgba(13,79,74,0.1);
}
.history-item .phase-badge {
  position: absolute;
  top: -16px; left: 24px;
  background: var(--color-primary);
  color: #fff;
  padding: 6px 16px;
  border-radius: 12px;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  font-weight: 700;
  transform: rotate(-2deg);
  box-shadow: 0 4px 10px rgba(13,79,74,0.2);
}
.history-item .period {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 4px;
}
.history-item h3 {
  font-size: 1.2rem;
  margin: 4px 0 12px;
  color: var(--color-ink);
}
.history-item p {
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0;
}

/* 用 SVG noise filter 在某些元素加微妙紙張紋理 */
.paper-bg {
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f7faf9 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.04'/></svg>");
}

/* ───── 大型 emoji / icon 風 stamp ───── */
.hd-stamp {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 88px; height: 88px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border-radius: 50%;
  font-family: var(--font-hand);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: 0 6px 18px rgba(62,199,154,0.4);
  border: 3px solid #fff;
  position: relative;
}
.hd-stamp::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed var(--color-accent);
  border-radius: 50%;
  opacity: 0.5;
}

/* 在某些 list 用手繪打勾取代 ✓ */
.list.hd-list li {
  padding-left: 36px;
  position: relative;
}
.list.hd-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 16px;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 13 Q 7 17, 10 18 Q 13 14, 16 9 T 21 4' stroke='%233ec79a' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-color: transparent;
}

/* 取消原本綠圈 ✓ 的樣式 */
.list.hd-list li::before {
  border-radius: 0 !important;
}