/*
 * 兔子接案所共用風格 v1
 * 正本：https://design.ra2b.it/kit/rabbit-studio.css
 * 說明：Docs/kit.md
 *
 * 第 1 層：design 本站（不用引用這份，本站有自己的完整樣式）
 * 第 2 層：沒有自己品牌的文件與表單 → <html class="rs-theme"> + .rs-header + .rs-credit-bar
 * 第 3 層：客戶品牌與創作作品 → 只放 .rs-credit-bar（深色頁面加 .rs-credit-bar--dark）
 */

:root {
  --rs-bg: #faf5ee;
  --rs-fg: #382e29;
  --rs-card: #fffaf4;
  --rs-primary: #9c432b;
  --rs-primary-hover: #86381f;
  --rs-on-primary: #ffffff;
  --rs-secondary: #f1e1d5;
  --rs-muted: #f1e9df;
  --rs-muted-fg: #756158;
  --rs-border: #dfd1c5;
  --rs-input: #cbb9aa;
  --rs-ring: #a7472c;
  --rs-danger: #b33e34;
  --rs-radius: 0.8rem;
  --rs-radius-pill: 999px;
  --rs-font-sans: Inter, "Noto Sans TC", "Noto Sans SC", "PingFang TC", "PingFang SC", "Microsoft JhengHei", sans-serif;
  --rs-font-serif: "Noto Serif TC", "Noto Serif SC", "Songti TC", "Songti SC", Georgia, serif;
  --rs-mark: url("https://design.ra2b.it/kit/rabbit-mark-64.png");
}

/* ---------- 第 2 層：整頁外觀 ---------- */

html.rs-theme {
  background: var(--rs-bg);
  color-scheme: light;
}

.rs-theme body {
  background: var(--rs-bg);
  color: var(--rs-fg);
  font-family: var(--rs-font-sans);
  -webkit-font-smoothing: antialiased;
}

.rs-theme h1,
.rs-theme h2 {
  font-family: var(--rs-font-serif);
  letter-spacing: 0.015em;
}

.rs-theme a {
  color: var(--rs-primary);
}

.rs-theme ::selection {
  background: #ead1b8;
}

.rs-theme :focus-visible {
  outline: 3px solid var(--rs-ring);
  outline-offset: 3px;
}

/* ---------- 第 2 層：頁首品牌列 ---------- */

.rs-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 100%;
  padding: 12px 20px;
  background: rgba(250, 245, 238, 0.95);
  border-bottom: 1px solid var(--rs-border);
  font: 500 14px/1.4 var(--rs-font-sans);
  color: var(--rs-fg);
}

.rs-header .rs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--rs-fg);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.07em;
}

.rs-header .rs-brand::before {
  content: "";
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--rs-mark) center / contain no-repeat;
}

.rs-header .rs-label {
  color: var(--rs-muted-fg);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: right;
}

/* ---------- 第 2、3 層：頁尾製作標記 ---------- */

.rs-credit-bar {
  all: initial;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 16px 28px;
  background: transparent;
}

.rs-credit-bar .rs-credit {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px solid #dfd1c5;
  border-radius: 999px;
  background: #faf5ee;
  color: #6d4b3c;
  font: 500 13px/1.4 Inter, "Noto Sans TC", "Noto Sans SC", "PingFang TC", "PingFang SC", sans-serif;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.rs-credit-bar .rs-credit::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--rs-mark) center / contain no-repeat;
}

.rs-credit-bar .rs-credit:hover {
  border-color: #9c432b;
  color: #9c432b;
}

.rs-credit-bar .rs-credit:focus-visible {
  outline: 3px solid #a7472c;
  outline-offset: 3px;
}

.rs-credit-bar--dark .rs-credit {
  border-color: rgba(250, 245, 238, 0.22);
  background: rgba(250, 245, 238, 0.06);
  color: #e9d9c8;
}

.rs-credit-bar--dark .rs-credit:hover {
  border-color: #e9c9b8;
  color: #faf5ee;
}

/* 自動款：跟著系統深淺模式切換，給有深色模式的頁面用 */
@media (prefers-color-scheme: dark) {
  .rs-credit-bar--auto .rs-credit {
    border-color: rgba(250, 245, 238, 0.22);
    background: rgba(250, 245, 238, 0.06);
    color: #e9d9c8;
  }

  .rs-credit-bar--auto .rs-credit:hover {
    border-color: #e9c9b8;
    color: #faf5ee;
  }
}

@media print {
  .rs-header,
  .rs-credit-bar {
    display: none !important;
  }
}