@charset "UTF-8";
@layer pages {
  .faq-page {
    background: var(--color-surface-2);
    padding-block: var(--space-9);
  }
  .faq-page .faq-hero {
    text-align: center;
    margin-block-end: var(--space-8);
  }
  .faq-page .faq-hero h1 {
    font-size: var(--fs-7);
    line-height: var(--lh-tight);
    color: var(--color-ink);
    text-wrap: balance;
    margin-block-end: var(--space-3);
  }
  .faq-page .faq-hero .lead {
    max-inline-size: 68ch;
    margin-inline: auto;
    color: var(--color-ink-2);
    font-size: var(--fs-2);
    line-height: var(--lh-normal);
  }
  .faq-page .faq-toc {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-end: var(--space-7);
  }
  .faq-page .faq-toc a {
    display: inline-flex;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--fs-1);
  }
  .faq-page .faq-toc a:hover {
    border-color: var(--color-accent-weak);
  }
  .faq-page .faq-toc a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .faq-page .faq-category {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: var(--elevation-1);
    padding: var(--space-7) var(--space-6);
    margin-block-end: var(--space-8);
    content-visibility: auto;
    contain-intrinsic-size: 1px 560px;
  }
  .faq-page .faq-category h2 {
    font-size: var(--fs-4);
    color: var(--color-ink);
    margin-block-end: var(--space-4);
    border-inline-start: 4px solid var(--color-accent);
    padding-inline-start: var(--space-3);
  }
  .faq-page .faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-2);
    background: var(--color-surface-3);
    margin-block: var(--space-3);
    overflow: clip;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .faq-page .faq-item[open] {
    background: var(--color-surface);
    border-color: var(--color-accent-weak);
    box-shadow: var(--elevation-1);
  }
  .faq-page .faq-q {
    --faq-icon: "＋"; /* 1. 優化點：定義預設圖示變數 */
    list-style: none; /* 2. 優化點：隱藏 Firefox 預設圖示 */
    cursor: pointer;
    font-weight: 700;
    color: var(--color-ink);
    padding: var(--space-4) var(--space-5);
    font-size: var(--fs-2);
    position: relative;
  }
  .faq-page .faq-q::-webkit-details-marker {
    display: none; /* 2. 優化點：隱藏 WebKit 預設圖示 */
  }
  .faq-page .faq-q::after {
    content: var(--faq-icon); /* 1. 優化點：使用變數 */
    position: absolute;
    inset-inline-end: var(--space-5);
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    opacity: 0.55;
  }
  .faq-page .faq-item[open] > .faq-q {
    --faq-icon: "－"; /* 1. 優化點：僅切換變數 */
  }
  .faq-page .faq-a {
    border-block-start: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5);
    color: var(--color-ink-2);
    font-size: var(--fs-1);
    line-height: var(--lh-loose);
  }
  .faq-page .faq-a p + p {
    margin-block-start: var(--space-3);
  }
  .faq-page {
    /* 容器查詢：寬容器強化節奏 */
  }
  .faq-page .container {
    container-type: inline-size;
  }
  @container (min-width: 56rem) {
    .faq-page .faq-category {
      padding: var(--space-8) var(--space-7);
    }
    .faq-page .faq-q {
      font-size: var(--fs-3);
    }
  }
  @media print {
    .faq-page {
      background: white;
    }
    .faq-page .faq-toc {
      display: none;
    }
    .faq-page .faq-category {
      box-shadow: none;
      border-color: #000;
    }
    .faq-page .faq-item {
      background: #fff;
    }
  }
}