/*
 * jh-seo-kit 平塗色塊設計系統
 *
 * 色彩一律讀 CSS 變數，由 <x-seo::head /> 依 config('seo-kit.tones') 產生：
 *   .sk-tone-{name}  區塊底色＋文字色（--sk-bg / --sk-fg）
 *   .sk-theme-{name} 頁面主題（--sk-accent / --sk-accent-fg / --sk-accent-ink），掛在 <body>
 * 這個檔不寫死任何品牌色，所以官網、產品站可以共用同一份。
 *
 * 風格原則：清楚的色塊、直角、幾乎不用陰影與漸層；標題置中、字距略開。
 */

.sk-container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .sk-container { padding: 0 24px; } }
@media (min-width: 1024px) { .sk-container { padding: 0 32px; } }

/* 區塊 */
.sk-section { padding: 96px 0; }
@media (max-width: 1023px) { .sk-section { padding: 72px 0; } }

/* 字距標籤：| LABEL | */
.sk-label {
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-bottom: 18px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sk-label, var(--sk-accent-ink, currentColor));
}
.sk-label::before, .sk-label::after { content: '|'; opacity: 0.45; font-weight: 400; }
.sk-label-start::before { display: none; }

/* 內頁頁首色帶 */
.sk-page-hero { padding: 88px 0 72px; }
.sk-page-hero-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.25; font-weight: 700; letter-spacing: 0.02em; text-wrap: balance; max-width: 22em; }
.sk-page-hero-lead { margin-top: 20px; max-width: 46em; font-size: 1.125rem; line-height: 1.8; opacity: 0.92; }
@media (max-width: 639px) { .sk-page-hero { padding: 64px 0 52px; } }

/* 色塊分類條 */
.sk-tri-bar { display: grid; grid-template-columns: repeat(var(--sk-tri-n, 3), 1fr); }
.sk-tri-bar a {
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 18px 12px; font-size: 15px; font-weight: 700; letter-spacing: 0.3em;
  text-decoration: none; transition: filter 0.15s ease;
}
.sk-tri-bar a:hover { filter: brightness(1.06); }
.sk-tri-bar a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: currentColor; opacity: 0.55; }
@media (max-width: 639px) { .sk-tri-bar a { letter-spacing: 0.1em; font-size: 14px; padding: 15px 6px; } }

/* 按鈕：直角 */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 2px; border: 1.5px solid transparent;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sk-btn-solid { background: var(--sk-accent, #1A1A1A); color: var(--sk-accent-fg, #fff); }
.sk-btn-solid:hover { filter: brightness(1.08); }
.sk-btn-light { background: #fff; color: #1A1A1A; }
.sk-btn-light:hover { filter: brightness(0.95); }
.sk-btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.sk-btn-ghost:hover { background: rgba(127, 127, 127, 0.12); }
.sk-btn-ink { background: #1A1A1A; color: #fff; }

/* 頁尾行動色帶 */
.sk-cta-band { padding: 72px 0; text-align: center; }
.sk-cta-band-title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; text-wrap: balance; margin: 0 auto 28px; max-width: 24em; }

/* FAQ */
.sk-faq { display: flex; flex-direction: column; }
.sk-faq-item { border-bottom: 1px solid rgba(127, 127, 127, 0.25); padding: 0 4px; }
.sk-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 36px 20px 0; font-weight: 700; font-size: 17px;
}
.sk-faq-item summary::-webkit-details-marker { display: none; }
.sk-faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--sk-accent-ink, currentColor); }
.sk-faq-item[open] summary::after { content: '−'; }
.sk-faq-item p { padding: 0 0 22px; line-height: 1.8; opacity: 0.85; }