@charset "utf-8";
/* ==========================================================================
   Component — 文章・分析の作例ページ（4ページ）で共有する部品
   2026-10-11 新設。対象＝/demo/analytics-report/ /demo/script/ /demo/recruit/ /demo/step-mail/
   ⛔ 既存のデモ（corporate・salon-lp ほか）はこのファイルを読まない。ここを直しても既存ページは変わらない。
   ⛔ 値は foundation.css のトークンだけを使う（色・文字サイズ・余白を直書きしない）。
      ダークモードはトークン側が差し替えるので、ここに分岐を書かない。
   ========================================================================== */
@layer component {

  /* ---- ページ冒頭：左に題と説明、右にその作例の「顔」になる見本 ---------- */
  .c-sample-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-8) var(--space-12);
    align-items: center;
  }
  .c-sample-head__kicker {
    display: block; margin-bottom: var(--space-2);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  }
  .c-sample-head__title { font-size: var(--fs-3xl); line-height: var(--lh-heading); }
  .c-sample-head__lead {
    margin-top: var(--space-4);
    max-width: var(--width-prose);
    color: var(--color-text-secondary);
  }
  /* 作例の仕様（媒体・分量・納品形式）。⛔ dd の既定の字下げは foundation で落としてある */
  .c-sample-spec {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    font-size: var(--fs-sm);
    line-height: var(--lh-compact);
  }
  .c-sample-spec__term { font-weight: 700; color: var(--color-text-primary); }
  .c-sample-spec__desc { color: var(--color-text-secondary); }
  .c-sample-head__visual { min-width: 0; }

  /* ---- ページ内の目次（横並びのリンク） ---------------------------------- */
  .c-sample-toc {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin-top: var(--space-6);
    padding: 0; list-style: none;
  }
  .c-sample-toc__item + .c-sample-toc__item { margin-top: 0; }
  .c-sample-toc__link {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--fs-xs); text-decoration: none;
  }
  .c-sample-toc__link:hover { border-color: var(--color-accent); color: var(--color-accent); }

  /* ---- 作例そのものを載せる紙面 ------------------------------------------ */
  .c-sample-paper {
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-card);
  }
  .c-sample-paper + .c-sample-paper { margin-top: var(--space-8); }
  .c-sample-paper__label {
    display: inline-block; margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700;
  }
  .c-sample-paper__title { font-size: var(--fs-xl); }
  .c-sample-paper__note {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
  }
  .c-sample-paper__body { margin-top: var(--space-6); }
  .c-sample-paper__body > * + * { margin-top: var(--space-4); }

  /* 紙面の中の小見出し */
  .c-sample-h {
    margin-top: var(--space-8);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-accent);
    font-size: var(--fs-lg);
  }
  .c-sample-h:first-child { margin-top: 0; }

  /* ---- 表（横に長い表はスマホで横スクロール＝ c-table-wrap と組み合わせる） */
  .c-sample-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: var(--lh-compact);
  }
  .c-sample-table__th,
  .c-sample-table__td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    vertical-align: top;
  }
  .c-sample-table__th {
    background: var(--color-bg-surface-alt);
    font-weight: 700;
    white-space: nowrap;
  }
  .c-sample-table__td--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .c-sample-table__td--up { color: var(--color-accent); font-weight: 700; }
  .c-sample-table__td--down { color: var(--color-warn-text); font-weight: 700; }

  /* ---- 制作した側からの補足（判断の基準を短く並べる） --------------------- */
  .c-sample-notes {
    display: grid; gap: var(--space-4);
    margin: 0; padding: 0; list-style: none;
    counter-reset: note;
  }
  .c-sample-notes__item {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
  }
  .c-sample-notes__item + .c-sample-notes__item { margin-top: 0; }
  .c-sample-notes__item::before {
    counter-increment: note;
    content: counter(note);
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700;
  }
  .c-sample-notes__title { font-size: var(--fs-md); }
  .c-sample-notes__desc {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-compact);
  }

  /* ---- ほかの作例へ ---------------------------------------------------- */
  .c-sample-next {
    display: grid; gap: var(--space-4);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0; padding: 0; list-style: none;
  }
  .c-sample-next__item + .c-sample-next__item { margin-top: 0; }
  .c-sample-next__link {
    display: block; height: 100%;
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: inherit; text-decoration: none;
  }
  .c-sample-next__link:hover { border-color: var(--color-accent); }
  .c-sample-next__kind { display: block; color: var(--color-accent); font-size: var(--fs-xs); font-weight: 700; }
  .c-sample-next__name { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); font-weight: 700; }
  .c-sample-back { margin-top: var(--space-8); text-align: center; }

  @media (max-width: 899px) {
    .c-sample-head { grid-template-columns: 1fr; }
    .c-sample-next { grid-template-columns: 1fr; }
  }
  @media (max-width: 767px) {
    .c-sample-head__title { font-size: var(--fs-2xl); }
    .c-sample-paper { padding: var(--space-6) var(--space-4); }
    .c-sample-spec { padding: var(--space-4); }
  }
}