/* ツクッカ共通のスタイル。値はすべて docs/BRAND_AND_UI.md の表と対応する。ここ以外に色コードや文字サイズを書かない。 */
:root {
  /* 色（3章） */
  --brand: #f26a2e;        /* 飾りの線と面だけ。文字には使わない */
  --accent: #b8471a;       /* 主要ボタン・リンク・状態チップ・フォーカス */
  --accent-hover: #9a3a14;
  --ink: #1f1a17;
  --muted: #6b625c;
  --line: #ece3d8;
  --bg: #fffaf5;
  --surface: #ffffff;
  --thumb-bg: #f6efe7;
  /* 文字（4章） */
  --fs-title: 24px;
  --fs-brand: 18px;
  --fs-section: 17px;
  --fs-card: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fs-tiny: 11px;
  /* 余白・角（5章） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --r-card: 12px; --r-panel: 14px; --r-field: 10px; --r-pill: 999px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
  font-size: var(--fs-body); line-height: 1.7;
}
h1, h2 { margin: 0; font-weight: 700; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--sp-5); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ヘッダー */
.site { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; min-width: 0; }
.brand img { border-radius: 50%; flex: none; }
.brand-name { display: block; font-size: var(--fs-brand); line-height: 1.3; font-weight: 700; }
.brand small { display: block; font-size: var(--fs-caption); color: var(--accent); font-weight: 700; line-height: 1.5; }
.xlink {
  flex: none; display: inline-flex; align-items: center; min-height: 32px;
  font-size: var(--fs-small); font-weight: 700; text-decoration: none;
  padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--accent); color: #fff;
}
.xlink:hover { background: var(--accent-hover); }

.intro { margin: var(--sp-5) 0 var(--sp-4); color: var(--muted); max-width: 46em; }

/* 検索と絞り込み（PCでは上に固定） */
.toolbar { display: grid; gap: var(--sp-2); padding-block: var(--sp-3); background: var(--bg); }
.search input {
  width: 100%; font: inherit; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-field);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.filter { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.filter .label { color: var(--muted); font-size: var(--fs-caption); min-width: 3.5em; flex: none; }
.filter button {
  flex: none; font: inherit; font-size: var(--fs-small); min-height: 32px; padding: 0 var(--sp-3);
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
}
.filter button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.count { margin: 0; font-size: var(--fs-caption); color: var(--muted); }

/* カード共通 */
.cards { display: grid; gap: var(--sp-3); }
.card {
  display: flex; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.card:hover { border-color: var(--accent); }
.thumb { display: block; background: var(--thumb-bg); flex: none; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.thumb-empty { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--muted); font-size: var(--fs-tiny); }
.thumb-empty b { width: var(--sp-8); height: var(--sp-8); border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-section); }
.body { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.chip { font-size: var(--fs-tiny); padding: 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); background: var(--bg); line-height: 1.6; }
.chip-status { color: var(--accent); border-color: currentColor; background: transparent; }
.name { font-size: var(--fs-card); line-height: 1.4; margin-top: 2px; }
.summary { font-size: var(--fs-small); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.updated { font-size: var(--fs-tiny); color: var(--muted); }

/* 案A：グリッド */
.layout-grid .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.layout-grid .card { flex-direction: column; }
.layout-grid .thumb { aspect-ratio: 4 / 3; width: 100%; }
@media (min-width: 720px) { .layout-grid .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); } }

/* 案B：リスト（現在の形） */
.layout-list .cards { grid-template-columns: 1fr; }
.layout-list .card { flex-direction: row; }
.layout-list .thumb { width: 104px; aspect-ratio: 1 / 1; }
@media (min-width: 720px) {
  .layout-list .cards { grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--sp-3); }
  .layout-list .thumb { width: 168px; aspect-ratio: 4 / 3; }
}

@media (min-width: 900px) {
  .toolbar { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4); }
  .search { flex: 0 1 340px; }
  .filter { flex-wrap: wrap; overflow: visible; }
  .count { margin-left: auto; white-space: nowrap; }
}
@media (max-width: 480px) {
  .brand-name { font-size: var(--fs-card); }
  .brand small { font-size: var(--fs-tiny); }
  .xlink { padding: 0 var(--sp-3); font-size: var(--fs-caption); }
}

.empty, .none { color: var(--muted); }
.next { margin: var(--sp-8) 0 var(--sp-2); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card); background: var(--surface); border: 1px dashed var(--brand); max-width: 760px; }
.next h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-section); line-height: 1.4; }
.next p { margin: 0; }
.next a, .ask a, .back a, .site-foot a { color: var(--accent); }
.site-foot { padding-block: var(--sp-7) var(--sp-8); color: var(--muted); font-size: var(--fs-caption); }

/* 詳細ページ */
.back { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-small); }
.tool { display: grid; gap: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: var(--sp-4); }
.tool .shot { background: var(--thumb-bg); border-radius: var(--r-field); overflow: hidden; display: grid; place-items: center; min-height: 160px; }
.tool .shot img { max-width: 100%; max-height: 480px; display: block; }
.tool .shot .thumb-empty { min-height: 200px; }
.tool .text { order: -1; }
.tool h1 { margin: var(--sp-2) 0 2px; font-size: var(--fs-title); line-height: 1.35; }
.tool .summary { font-size: var(--fs-body); font-weight: 700; -webkit-line-clamp: unset; display: block; margin: 0 0 var(--sp-3); }
.tool p { margin: 0 0 var(--sp-3); }
@media (min-width: 900px) {
  .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: var(--sp-6); align-items: start; }
  .tool .text { order: 0; }
  .tool .shot img { max-height: 640px; }
}