/* 見本のカタログ（/catalog/）。余白はトークンの段階（--sp-1〜8＝4・8・16・24・32・48・64・96px。design-os の spacing.scale と同じ）だけを使う。
   style.css の変数とクラスを使う。
   テーマの色・書体は /catalog/demo/assets/ds/themes.css（[data-theme="TH-xx"] の変数）を読み、
   .th-sws・.th-type の中だけで使う（ページ全体の色は変えない）。 */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; }
.cat-top { padding-bottom: 0; }
.cat-sub { display: block; font-size: .5em; letter-spacing: .08em; color: var(--accent); margin-top: var(--sp-1); }
.cat-notice { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-3) var(--sp-3); margin: 0 0 var(--sp-4); }
.cat-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); max-width: 46em; }
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
.cat-card { display: flex; flex-direction: column; gap: var(--sp-2); scroll-margin-top: var(--sp-8); }
.cat-card:target, .th-card:target { box-shadow: 0 0 0 3px var(--warm); }
.cat-shot { width: 100%; height: auto; aspect-ratio: 390 / 560; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); margin-bottom: var(--sp-2); }
.cat-industry { margin: 0; color: var(--accent); font-weight: 700; font-size: .875rem; letter-spacing: .06em; }
.cat-name { font-size: 1.15rem; margin: 0; line-height: 1.5; }
.cat-fiction { font-size: .8rem; font-weight: 400; color: var(--ink-soft); }
.cat-headline { margin: 0; font-weight: 700; line-height: 1.6; }
.cat-part { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.7; }
.cat-links { margin: auto 0 0; padding-top: var(--sp-2); display: grid; gap: var(--sp-2); }
.cat-links .btn { width: 100%; text-align: center; }
.cat-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---- 12 の見た目（2026-11-04 作り直し）。プレビューは実際の見本のスクリーンショット（tools/shot_catalog.mjs が撮る） ---- */
.cg-filter { min-width: 0; display: grid; gap: var(--sp-3); margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.cg-filter fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cg-filter legend { font-weight: 700; font-size: .95rem; margin: 0 0 var(--sp-2); padding: 0; }
.cg-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cg-filter label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--line); border-radius: 999px; background: var(--bg); cursor: pointer; font-size: .95rem; }
.cg-filter input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
.cg-filter input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* スマホ：選択肢は横に送る（ページは横に動かない。この行の中だけ） */
.cg-opts { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
@media (max-width: 899px) { .cg-filter fieldset { display: block; } .cg-opts { flex-wrap: nowrap; overflow-x: auto; padding: var(--sp-1) var(--sp-1) var(--sp-2); scrollbar-width: thin; } .cg-filter label { flex: none; } }
@media (min-width: 900px) { .cg-filter { grid-template-columns: 1fr; padding: var(--sp-3) var(--sp-4); } .cg-filter fieldset { flex-wrap: wrap; } .cg-filter legend { float: left; margin: 0 var(--sp-3) 0 0; min-height: 44px; display: flex; align-items: center; } }
.cg-empty { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-7) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.cg-item { display: grid; gap: var(--sp-3); align-content: start; scroll-margin-top: var(--sp-8); }
.cg-item:target .cg-prev { box-shadow: 0 0 0 3px var(--warm); }
.cg-prev { position: relative; display: block; border-radius: 8px; padding-bottom: var(--sp-4); }
.cg-pc { width: 78%; height: auto; aspect-ratio: 1280 / 800; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-alt); box-shadow: 0 10px 30px rgb(29 36 48 / .12); }
.cg-sp { position: absolute; right: 0; bottom: 0; width: 24%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border: 6px solid #1d2430; border-radius: 22px; background: var(--bg-alt); box-shadow: 0 10px 24px rgb(29 36 48 / .22); }
.cg-prev:hover .cg-pc { transform: scale(1.03); }
.cg-pc { transition: transform .2s ease; }
.cg-body { display: grid; gap: var(--sp-2); }
.cg-meta { margin: 0; font-size: .85rem; letter-spacing: .08em; color: var(--ink-soft); display: flex; align-items: baseline; gap: var(--sp-2); }
.cg-no { font-size: 1.5rem; font-weight: 700; color: var(--ink); letter-spacing: 0; line-height: 1; }
.cg-name { margin: 0; font-size: 1.4rem; line-height: 1.4; }
.cg-shop { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.cg-sig { margin: 0; line-height: 1.7; }
.cg-actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.cg-order { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.cg-order::after { content: "→"; margin-left: var(--sp-1); }
.th-detail summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: .25em; }
.th-detail summary::-webkit-details-marker { display: none; }
.th-detail summary::before { content: "＋"; text-decoration: none; }
.th-detail[open] summary::before { content: "－"; }
.th-detail > * + * { margin-top: var(--sp-2); }
.th-photo-note { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }
.th-moods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.th-moods li { font-size: .85rem; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.th-sws { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-2); font-size: .8125rem; line-height: 1.4; color: var(--ink-soft); }
.th-sw { display: block; height: 32px; border-radius: 8px; border: 1px solid rgb(0 0 0 / .14); margin-bottom: var(--sp-1); }
.th-sw--base { background: var(--color-base); }
.th-sw--surface { background: var(--color-surface); }
.th-sw--text { background: var(--color-text); }
.th-sw--main { background: var(--color-main); }
.th-sw--accent { background: var(--color-accent); }
.th-type { margin: 0; padding: var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-1); background: var(--color-base); color: var(--color-text); border: 1px solid var(--line); border-radius: 8px; }
.th-type__h { font-family: var(--typography-family-heading); font-weight: var(--typography-weight-heading); font-size: 1.45rem; line-height: 1.3; }
.th-type__b { font-family: var(--typography-family-body); font-size: .95rem; }
.th-type__n { font-size: .8125rem; color: var(--color-text-muted); }
[data-theme="TH-07"] { --typography-weight-heading: 900; }
@media (prefers-reduced-motion: reduce) { .cg-pc { transition: none; } .cg-prev:hover .cg-pc { transform: none; } }

.th-rec { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.th-rec li { display: grid; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.th-rec__ind { font-weight: 700; }
.th-rec__list { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.th-rec__list a { display: inline-flex; align-items: center; min-height: 44px; }
.th-rec__list a::before { content: counter(r) "."; counter-increment: r; margin-right: var(--sp-1); color: var(--ink-soft); font-size: .85em; }
.th-rec__list { counter-reset: r; }
.th-rec__list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .th-rec li { grid-template-columns: 18em 1fr; align-items: center; } .th-rec__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 読みやすさ：文節で折り、行頭の 1〜2 字を避ける */
.cat-top p, .cat-top li, .cg-sec p, .cg-body p, #cat-cta ~ p { word-break: auto-phrase; text-wrap: pretty; }
/* 反証のレビュー 2 周目 */
/* 導入の文・注記・手順の右端を 1 つに */
.cat-top .lead, .cat-notice, .cat-steps { max-width: 40em; }
/* 見出し→リードは 16px、リード→ボタンは 32px の 1 値 */
.cat-top h1 + .lead, .cg-sec h2 + p, .th-rec-sec h2 + p, #cat-cta + p { margin-top: var(--sp-3); }
.cat-cta-row { margin-top: var(--sp-5); }
/* プレビューの下端は、画面の続きがあることを薄く示す（行の途中で切れて見えないように） */
.cg-pc, .cg-sp { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.cg-sp { border-bottom-width: 0; }
/* 反証のレビュー 3 周目 */
/* PC：見出しを左に浮かせ、選択肢は右の箱の中で折り返す（折り返しても揃え線は 1 本） */
@media (min-width: 900px) {
  .cg-filter fieldset { display: block; }
  .cg-filter legend { float: left; width: 9em; margin: 0; }
  .cg-filter .cg-opts { overflow: hidden; }
}
.cg-sec h2 + p, .th-rec-sec h2 + p, #cat-cta + p { max-width: 40em; }
.th-detail summary { font-weight: 400; color: var(--ink-soft); }
.cg-meta { font-size: .875rem; color: var(--ink); }
@media (max-width: 899px) { .cg-opts { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.th-rec__consult { min-height: 44px; justify-self: start; }
@media (min-width: 720px) { .th-rec li { grid-template-columns: 18em 1fr auto; } }
.th-rec__more { margin-top: var(--sp-4); }