/* ============================================================
   Autolab Sign-Off 換膚層｜subsidy.autolab.cloud（2026 企業 AI 培訓政府補助）
   2026-10-11。原站是深色（夜藍底＋亮青），這層把它翻成白底新識別。
   只覆蓋外觀，不動功能；拿掉 index.html 裡那行 link 就回到舊樣子。
   規範：logo-signoff/02-品牌核心.md
   唯一的橘：CTA 區「來信諮詢：幫你對方案 →」（實心、墨字、無光暈）。
   原本的警示橘黃 → 淺芒果底＋洋紅字；亮青 → 主色青。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  --so-teal: #00708A;
  --so-teal-dk: #005A6F;
  --so-teal-lt: #E8F4F6;
  --so-ink: #1C1C1E;
  --so-sub: #636366;
  --so-mist: #F5F5F7;
  --so-line: #E5E5EA;
  --so-mango: #FFC233;
  --so-mango-lt: #FFF1D6;
  --so-orchid: #9C2A6B;
  --so-orchid-lt: #F6E6F0;
  --so-orange: #FF6B35;

  /* 接管原本的深色 tokens（變數名沿用，值改成淺色版） */
  --cyan: var(--so-teal);
  --cyan-hover: var(--so-teal-dk);
  --navy: #FFFFFF;          /* 原本當頁底與按鈕上的字色 */
  --card: #FFFFFF;
  --line: var(--so-line);
  --hover: var(--so-mist);
  --orange: var(--so-orchid);
  --success: #1E7B3A;
  --warning: var(--so-orchid);
  --t-white: var(--so-ink);  /* 原本的「白標題」 */
  --t-body: var(--so-ink);
  --t-sub: var(--so-sub);
  --t-hint: var(--so-sub);
}

html body { background: #FFFFFF; color: var(--so-ink); }
html body h1, html body h2, html body h3 {
  font-family: "Inter Tight", "Noto Sans TC", sans-serif;
}

/* ---------- Hero：白底＋簽名線＋章 ---------- */
html body .hero { position: relative; padding-bottom: clamp(52px, 8vw, 72px); margin-bottom: 28px; }
html body .hero::before {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--so-ink);
  pointer-events: none;
}
html body .hero::after {
  content: "";
  position: absolute; bottom: 1.5px;
  right: max(20px, calc((100% - 920px) / 2 + 20px));
  width: 64px; height: 64px;
  transform: translateY(50%);
  background: #FFFFFF url("autolab-icon-64.svg") center / contain no-repeat;
  border-radius: 50%;
  pointer-events: none;
}

html body .badge-top {
  background: var(--so-mango);
  border: 0;
  color: var(--so-ink);
  border-radius: 2px;
  font-family: "JetBrains Mono", "Noto Sans TC", monospace;
  letter-spacing: .04em;
  padding: 4px 10px;
}
html body .hero h1 { color: var(--so-ink); }
html body .hero h1 .hl { color: var(--so-teal); text-shadow: none; }
html body .hero .sub { color: var(--so-sub); }
html body .hero .meta { font-family: "JetBrains Mono", "Noto Sans TC", monospace; font-size: 12px; }

/* ---------- 免責與急件：淺芒果 ---------- */
html body .disclaimer {
  background: var(--so-mango-lt);
  border: 0; border-left: 4px solid var(--so-mango);
  border-radius: 4px;
}
html body .disclaimer strong { color: var(--so-ink); }
html body .urgent-banner {
  background: var(--so-mango-lt);
  border: 1px solid var(--so-mango);
  border-top: 4px solid var(--so-mango);
  border-radius: 4px;
  box-shadow: none;
}
html body .urgent-banner .tag {
  background: var(--so-mango); color: var(--so-ink);
  border-radius: 2px;
  font-family: "JetBrains Mono", "Noto Sans TC", monospace;
}
html body .urgent-banner .cd {
  background: var(--so-ink); color: var(--so-mango);
  border: 0; border-radius: 4px;
  font-family: "JetBrains Mono", "Inter", monospace;
}

/* ---------- 區塊標題 ---------- */
html body h2.sec { border-left: 0; padding-left: 0; box-shadow: inset 0 -8px 0 var(--so-mango); display: inline-block; padding: 0 2px; }
html body .finder h2 .hl { color: var(--so-teal); }

/* ---------- 三題找方案 ---------- */
html body .finder { background: var(--so-mist); border: 1px solid var(--so-line); border-radius: 4px; }
html body .qbtn { background: #FFFFFF; border: 1px solid #C7C7CC; border-radius: 4px; color: var(--so-ink); }
html body .qbtn:hover { background: var(--so-teal-lt); border-color: var(--so-teal); }
html body .qbtn.on { background: var(--so-ink); border-color: var(--so-ink); color: #FFFFFF; }
html body .btn-go { background: var(--so-teal); color: #FFFFFF; border-radius: 4px; }
html body .btn-go:hover { background: var(--so-teal-dk); box-shadow: none; }
html body .btn-reset { border-radius: 4px; border-color: #C7C7CC; background: #FFFFFF; }
html body .result-summary { background: var(--so-teal-lt); border: 0; border-left: 4px solid var(--so-teal); border-radius: 4px; }

/* 圖例 */
html body .legend .dot { border-radius: 2px; }
html body .dot-yes { background: var(--so-teal); box-shadow: none; }
html body .dot-maybe { background: var(--so-mango); }
html body .dot-no { background: #C7C7CC; }

/* ---------- 方案卡片 ---------- */
html body .card { border: 1px solid var(--so-line); border-radius: 4px; box-shadow: none; }
html body .card.is-yes { border-color: var(--so-teal); box-shadow: inset 4px 0 0 var(--so-teal); }
html body .card.is-maybe { border-color: var(--so-mango); box-shadow: inset 4px 0 0 var(--so-mango); }
html body .card.urgent-card { border-color: var(--so-mango); box-shadow: inset 0 4px 0 var(--so-mango); }
html body .card.urgent-card.is-yes { border-color: var(--so-teal); box-shadow: inset 4px 0 0 var(--so-teal), inset 0 4px 0 var(--so-mango); }
html body .card h3 .num { font-family: "JetBrains Mono", monospace; color: var(--so-teal); }
html body .st, html body .mb { border-radius: 2px; }
html body .st-open { background: #E6F2E9; color: #1E7B3A; }
html body .st-check { background: var(--so-mango-lt); color: var(--so-ink); }
html body .st-hot { background: var(--so-orchid-lt); color: var(--so-orchid); }
html body .st-closed { background: var(--so-mist); color: var(--so-sub); }
html body .mb-yes { background: var(--so-teal); color: #FFFFFF; }
html body .mb-maybe { background: var(--so-mango); color: var(--so-ink); }
html body .mb-no { background: var(--so-mist); color: var(--so-sub); }
html body .keyline .k .kl { font-family: "JetBrains Mono", "Noto Sans TC", monospace; }

html body .why { background: var(--so-teal-lt); border-radius: 0 4px 4px 0; }
html body .card.is-maybe .why { background: var(--so-mango-lt); border-left-color: var(--so-mango); }
html body .card.closed-card .why { background: var(--so-mist); }
html body .quote { background: var(--so-mist); border-radius: 0 4px 4px 0; }
html body .fit, html body .note { border-radius: 4px; }
html body .fit { background: var(--so-teal-lt); }
html body .note { background: var(--so-mango-lt); }
html body .btn-link {
  background: #FFFFFF; color: var(--so-teal);
  border: 1px solid var(--so-teal); border-radius: 4px;
}
html body .btn-link:hover { background: var(--so-teal-lt); box-shadow: none; }

/* ---------- 對照表 ---------- */
html body .table-scroll { border-radius: 4px; }
html body table.overview th { background: var(--so-mist); color: var(--so-sub); font-family: "JetBrains Mono", "Noto Sans TC", monospace; }
html body table.overview tr:hover td { background: var(--so-mist); }

/* ---------- CTA：墨底，唯一的橘鈕 ---------- */
html body .cta { background: var(--so-ink); border: 0; border-radius: 4px; }
html body .cta h2 { color: #FFFFFF; }
html body .cta p { color: #C7C7CC; }
html body .cta .btn-main {
  background: var(--so-orange); color: var(--so-ink);
  font-weight: 700; border-radius: 4px; box-shadow: none;
}
html body .cta .btn-main:hover { background: var(--so-orange); color: var(--so-ink); box-shadow: none; text-decoration: underline; }
html body .cta .btn-ghost { border: 1px solid #FFFFFF; color: #FFFFFF; border-radius: 4px; }
html body .cta .btn-ghost:hover { background: rgba(255,255,255,.08); }
html body .cta .more { border-top-color: #3A3A3C; color: #C7C7CC; }
html body .cta .more a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 頁尾：章 ---------- */
html body footer::before {
  content: "";
  display: block; margin: 8px auto 12px;
  width: 40px; height: 40px;
  background: url("autolab-icon-64.svg") center / contain no-repeat;
}
html body footer .brand { color: var(--so-ink); }

@media (max-width: 640px) {
  html body .hero::after { width: 48px; height: 48px; }
}