/* AI・Workspace 週報
 * 名義: 中立ブランド
 * スケール: .company/creative/specs/_core.md（文字 12/14/16/20/25/32・余白 4〜64・角丸 6/12）
 *
 * 主軸 Stripe から借りる3つ:
 *   1) 文字色を灰色でなく深い紺にする（ink #0B2540。Stripe の #061b31 に相当）。ヘッダー帯も同じ紺の明度差グラデ
 *   2) 影に紺みを混ぜた2層の影 rgba(11,37,64,.25) 0 30px 45px -30px（浮かせるのは最新の週カードだけ）
 *   3) ピル形を使わない。角丸は 6px（タグ・ボタン）と 12px（カード）の2値だけ
 *
 * 色: 主色＝紺（ink）／補助色＝琥珀（amber・番号と「最新」だけ）／ツール別の識別色5色（タグ・アイコン・カードの左帯）
 * コントラスト（check.py で実測）:
 *   ink 15.52(白)/14.22(surface)・muted 6.99/6.41・line-strong 3.44/3.15・focus 4.79/4.38
 *   ink on amber 7.77・白 on 帯 15.52/10.72・帯の淡色文字 10.36/7.15・amber on 帯 7.77/5.36
 *   ツール色（白/淡色面）: Claude 5.45/4.80・Gemini 6.44/5.69・Workspace 5.69/5.03・OpenAI 6.11/5.36・その他 6.02/5.27
 */
:root {
  color-scheme: light;
  --ink: #0B2540;
  --muted: #4D5A6E;
  --paper: #FFFFFF;
  --surface: #F3F5F9;
  --line: rgba(11, 37, 64, .12);
  --line-strong: #7F8BA0;
  --focus: #C24E0B;
  --amber: #F2A93B;
  --amber-tint: #FDF0D9;
  --band-1: #0B2540;
  --band-2: #173F6B;
  --on-band: #FFFFFF;
  --on-band-muted: #C9D4E3;

  /* ツール別の識別色（文字・アイコン用）と淡色面 */

  --shadow-sm: 0 1px 2px rgba(11, 37, 64, .06), 0 1px 3px rgba(11, 37, 64, .10);
  --shadow-lg: rgba(11, 37, 64, .25) 0 30px 45px -30px, rgba(0, 0, 0, .1) 0 18px 36px -18px;

  --fs--2: 14px; --fs--1: 14px; --fs-0: 16px; --fs-1: 20px; --fs-2: 25px; --fs-3: 32px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-sm: 6px; --r-md: 12px;
  --ic-box: 32px;
  --lh-body: 1.8; --lh-heading: 1.35; --lh-tight: 1.5;
  --container: calc(100vw - 32px);            /* スマホ: 左右16px */
  --font: "BIZ UDPGothic", "Noto Sans JP", sans-serif;

  --tool: var(--ink);
  --tool-tint: var(--surface);
}

/* ツールの色（--tool / --tool-tint）は build.py が data/tools.json から style 属性で出す */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-heading); }
[hidden] { display: none !important; }
.wrap { width: var(--container); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-js .mode, .no-js .search, .no-js #view-tools, .no-js #view-list, .no-js .back { display: none; }

/* ---------- ヘッダー（紺の帯・同系色の明度差だけのグラデ） ---------- */
.site-head {
  background-color: var(--band-1);
  background-image: linear-gradient(120deg, var(--band-1) 0%, var(--band-1) 35%, var(--band-2) 100%);
  color: var(--on-band);
}
.site-head :focus-visible { outline-color: var(--amber); }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding-top: var(--s-2); }
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--on-band); text-decoration: none; font-size: var(--fs-1); font-weight: 700; white-space: nowrap;
}
.brand::before {
  content: ""; flex: none; width: 8px; height: 24px; background-color: var(--amber);
}
.brand:hover { color: var(--on-band); }
.search { position: relative; width: 280px; }
.search input {
  width: 100%; height: 40px; padding: 0 var(--s-7) 0 var(--s-6);
  font: inherit; font-size: var(--fs--1); color: var(--ink);
  background-color: var(--paper);
  border: 1px solid transparent; border-radius: var(--r-sm);
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus-visible { outline-offset: 2px; }
.search-ic {
  position: absolute; left: var(--s-3); top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search-clear {
  position: absolute; right: 0; top: 0; width: 44px; height: 100%;
  border: 0; background-color: transparent; color: var(--muted); font: inherit; font-size: var(--fs-1); cursor: pointer;
}
.search-clear:hover { color: var(--ink); }
.site-head .search-clear:focus-visible { outline-color: var(--focus); outline-offset: -2px; }

.mode-inner { display: flex; gap: var(--s-1); }
.mode a {
  display: flex; align-items: center; height: 48px; padding: 0 var(--s-4);
  color: var(--on-band-muted); text-decoration: none; font-size: var(--fs-0); font-weight: 400;
  border-bottom: 4px solid transparent;
}
.mode a:hover { color: var(--on-band); border-bottom-color: rgba(255, 255, 255, .3); }
.mode a[aria-current="page"] { color: var(--on-band); font-weight: 700; border-bottom-color: var(--amber); }
.mode a:focus-visible { outline-offset: -2px; }

/* ---------- 共通の見出し ---------- */
.main { padding-block: var(--s-7) var(--s-8); }
.page-title { font-size: var(--fs-3); font-weight: 700; color: var(--ink); }
.page-meta { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs--1); }
.view > .rows, .view > .feature { margin-top: var(--s-6); }
.back {
  display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--s-2);
  font-size: var(--fs--1); font-weight: 700; text-decoration: none;
}
.back:hover { text-decoration: underline; }

/* ---------- ツール一覧（カードの行） ---------- */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.row {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: var(--s-4); min-height: 72px; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-4);
  color: var(--ink); text-decoration: none;
  background-color: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--tool); border-radius: var(--r-md);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
/* アイコンの下に敷く淡色の四角 */
.row:has(.row-ic)::before {
  content: ""; position: absolute; z-index: -1; left: var(--s-4); top: calc(50% - 20px);
  width: 40px; height: 40px; border-radius: var(--r-sm); background-color: var(--tool-tint);
}
.row:hover { color: var(--ink); border-color: var(--tool); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.row:hover .row-title { text-decoration: underline; text-decoration-color: var(--tool); }
/* 週の行（アイコンなし）は左帯を出さず、ホバーで紺の帯を出す */
.row:not(:has(.row-ic)) { border-left-color: var(--line); padding-left: var(--s-5); }
.row:not(:has(.row-ic)):hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.row-main { flex: 1; display: flex; flex-direction: column; }
.row-title { font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-heading); }
.row-sub { margin-top: var(--s-1); font-size: var(--fs--1); color: var(--muted); }
.row .row-ic { width: 24px; height: 24px; margin: var(--s-2); background-color: var(--tool); }
.chev-r { color: var(--tool); font-size: var(--fs-1); font-weight: 700; }
.month { margin-top: var(--s-7); margin-bottom: var(--s-2); font-size: var(--fs--1); font-weight: 700; color: var(--muted); }

/* ---------- 最新の週（主役のカード・唯一の大きな影） ---------- */
.feature {
  position: relative; overflow: hidden;
  display: block; padding: var(--s-6) var(--s-6) var(--s-5);
  background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color: var(--ink); text-decoration: none;
}
.feature::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background-image: linear-gradient(90deg, var(--band-1), var(--band-2));
}
.feature:hover { color: var(--ink); }
.feature:hover .feature-go { background-color: var(--band-2); }
.feature .row-title, .feature .row-sub { display: block; }
.feature .row-title { font-size: var(--fs-2); }
.feature-label {
  display: inline-block; margin-bottom: var(--s-3); padding: 0 var(--s-2); border-radius: var(--r-sm);
  background-color: var(--amber); color: var(--ink); font-size: var(--fs--1); font-weight: 700;
}
.feature-points, .points ol { list-style: none; margin: var(--s-5) 0 0; padding: 0; counter-reset: pt; }
.feature-points li, .points li {
  position: relative; counter-increment: pt; padding-left: var(--s-7);
}
.feature-points li + li, .points li + li { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.feature-points li::before, .points li::before {
  content: counter(pt); position: absolute; left: 0;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm);
  background-color: var(--amber-tint); color: var(--ink); font-weight: 700; line-height: 1;
  border-bottom: 3px solid var(--amber);
}
.feature-points li + li::before, .points li + li::before { top: var(--s-4); }
.feature-go {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-5); padding: 0 var(--s-5);
  border-radius: var(--r-sm); background-color: var(--ink); color: var(--on-band); font-weight: 700;
  transition: background-color .15s;
}

/* ---------- 週のページ ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-bottom: var(--s-6); }
.pager-link {
  display: flex; flex-direction: column; min-height: 56px; padding: var(--s-2) var(--s-4);
  background-color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  color: var(--ink); text-decoration: none;
}
.pager-link.next { text-align: right; }
.pager-link:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.pager-dir { font-size: var(--fs-0); font-weight: 700; line-height: var(--lh-tight); }
.pager-period { font-size: var(--fs--1); color: var(--muted); line-height: var(--lh-tight); }
.pager-link.is-disabled { background-color: transparent; border-style: dashed; color: var(--muted); cursor: not-allowed; }
.pager-link.is-disabled:hover { border-color: var(--line-strong); box-shadow: none; }
.week + .week { margin-top: var(--s-8); }
.week-head { margin-bottom: var(--s-5); }
.points {
  margin-bottom: var(--s-6); padding: var(--s-5);
  background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  border-top: 4px solid var(--amber);
}
.points h3 { font-size: var(--fs--1); font-weight: 700; color: var(--muted); }
.points ol { margin-top: var(--s-4); }

/* 一覧表示（ツール別・検索）では週を小見出しにする */
.is-list .pager, .is-list .points { display: none; }
.is-list .week + .week { margin-top: var(--s-6); }
.is-list .week-head { margin-bottom: var(--s-3); }
.is-list .week-head .page-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs--1); color: var(--ink);
}
.is-list .week-head .page-title::before { content: ""; width: 4px; height: 16px; background-color: var(--amber); }
.is-list .week-head .page-meta { display: none; }

/* ---------- ニュース1件（折りたたみカード） ---------- */
.items { display: grid; gap: var(--s-3); }
.item {
  background-color: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--tool); border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s;
}
.item:hover { border-color: var(--line-strong); }
.item[open] { border-color: var(--tool); }
.item > summary {
  display: flex; align-items: flex-start; gap: var(--s-4); min-height: 56px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  cursor: pointer; list-style: none;
  transition: background-color .15s;
}
.item > summary::-webkit-details-marker { display: none; }
.item > summary:hover { background-color: var(--tool-tint); }
.item > summary:hover .title { text-decoration: underline; text-decoration-color: var(--tool); text-underline-offset: 4px; }
.item[open] > summary { background-color: var(--tool-tint); border-bottom: 1px solid var(--line); }
.item > summary:focus-visible { outline-offset: -4px; border-radius: var(--r-md); }
.ic-box {
  flex: none; display: grid; place-items: center; width: var(--ic-box); height: var(--ic-box); margin-top: var(--s-1);
  border-radius: var(--r-sm); background-color: var(--tool-tint); border: 1px solid var(--line);
}
.item[open] .ic-box, .item > summary:hover .ic-box { background-color: var(--paper); }
.ic {
  flex: none; display: inline-block; width: 20px; height: 20px; background-color: var(--ink);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.ic-box .ic { background-color: var(--tool); }
.sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs--1); color: var(--muted); }
.tag {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 24px; padding: 0 var(--s-2);
  border-radius: var(--r-sm); background-color: var(--tool-tint); color: var(--tool);
  font-size: var(--fs--2); font-weight: 700; border: 1px solid var(--line);
}
.tag .ic { width: 14px; height: 14px; background-color: currentColor; }
.item > summary:hover .tag, .item[open] .tag { background-color: var(--paper); }
.date { color: var(--ink); font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: var(--s-1); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status.is-official { color: var(--ink); font-weight: 700; }
.status.is-official::before { background-color: var(--ink); }
.status.is-press { color: var(--muted); font-weight: 400; }
.status.is-press::before { border: 2px solid var(--line-strong); }
.title { font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-heading); color: var(--ink); }
.excerpt { font-size: var(--fs--1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
mark { background-color: var(--amber-tint); color: var(--ink); text-decoration: underline 2px var(--amber); text-underline-offset: 3px; }
.chev {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: var(--s-1);
  border-radius: var(--r-sm); background-color: transparent; position: relative;
}
.chev::before {
  content: ""; width: 24px; height: 24px; background-color: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .15s;
}
.item > summary:hover .chev { background-color: var(--paper); }
.item > summary:hover .chev::before, .item[open] .chev::before { background-color: var(--tool); }
.item[open] > summary .chev::before { transform: rotate(180deg); }

.item-body { padding: var(--s-5) var(--s-5) var(--s-6) var(--s-8); }
.item-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-6); }
.lead { max-width: 34em; font-weight: 700; }
.block { margin-top: var(--s-5); }
aside > .block:first-child { margin-top: 0; }
aside {
  align-self: start; padding: var(--s-4); border-radius: var(--r-sm); background-color: var(--surface);
}
.item h4 { font-size: var(--fs--1); font-weight: 700; color: var(--muted); margin-bottom: var(--s-2); }
.uc { list-style: none; margin: 0; padding: 0; }
.uc li { padding: var(--s-3) var(--s-4); border-left: 4px solid var(--tool); background-color: var(--surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.uc li + li { margin-top: var(--s-2); }
.uc-kind { display: inline-block; font-size: var(--fs--1); font-weight: 700; color: var(--tool); }
.uc-kind.is-note { color: var(--muted); }
.uc-src { display: block; margin-top: var(--s-1); font-size: var(--fs--1); }
a.uc-src { color: var(--muted); }
a.uc-src:hover { color: var(--ink); }
span.uc-src { color: var(--muted); }
.muted { color: var(--muted); }
.changes { margin: 0; padding-left: 1.2em; }
.changes li::marker { color: var(--tool); }
.changes li + li { margin-top: var(--s-1); }
.plans { margin: 0; }
.plans dt { font-weight: 700; }
.plans dt.ok { color: var(--ink); }
.plans dt.ng, .plans dt.na { color: var(--muted); }
.plans dd { margin: 0; }
.plans dd + dt { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.terms { margin: 0; }
.terms dt { font-weight: 700; }
.terms dd { margin: 0 0 var(--s-2); }
.sources { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs--2); color: var(--muted); }
.sources a { color: var(--muted); }
.sources a:hover { color: var(--ink); }
.sources a + a::before { content: "／"; color: var(--muted); display: inline-block; margin-inline: var(--s-1); }

/* ---------- 料金プランの見方・空の状態・フッター ---------- */
.plans-view { max-width: 780px; }
.plans-view .label-guide { margin-top: 0; }
.plans-view > p:last-child { color: var(--muted); font-size: var(--fs--1); }
.plan-tool { margin-top: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-md); background-color: var(--paper); }
.plan-tool > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); min-height: 64px; list-style: none; cursor: pointer; }
.plan-tool > summary::-webkit-details-marker { display: none; }
.plan-tool > summary:hover { background-color: var(--surface); border-radius: var(--r-md); }
.plan-tool > summary:focus-visible { outline-offset: -4px; }
.plan-tool h2 { font-size: var(--fs-1); overflow-wrap: anywhere; }
.plan-toggle-hint { flex-shrink: 0; font-size: var(--fs--1); color: var(--muted); }
.plan-tool .when-open, .plan-tool[open] .when-closed { display: none; }
.plan-tool[open] .when-open { display: inline; }
.plan-tool[open] > summary { border-bottom: 1px solid var(--line); }
.plan-tool-body { padding: var(--s-5); }
.plan-tool .btn { white-space: normal; overflow-wrap: anywhere; }
.home-intro { margin-bottom: var(--s-6); }
.home-kicker { color: var(--muted); font-size: var(--fs--1); margin-bottom: var(--s-3); }
.home-lead { margin-top: var(--s-4); max-width: 34em; color: var(--muted); }
.home-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--s-5); }
.home-layout .feature { height: 100%; }
.home-explore { padding: var(--s-5); background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.home-explore h2, .home-section-head h2 { font-size: var(--fs-1); }
.home-tools { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.home-tools a { display: block; padding-block: var(--s-2); color: var(--tool); text-decoration: none; border-bottom: 1px solid var(--line); }
.home-tools a:hover { text-decoration: underline; }
.home-plan { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.home-plan p { margin-block: var(--s-3); color: var(--muted); font-size: var(--fs--1); }
.home-plan a { font-weight: 700; }
.home-news { margin-top: var(--s-7); }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.home-section-head a { font-size: var(--fs--1); }
.home-archive { margin-top: var(--s-5); }
.item { scroll-margin-top: var(--s-5); }
@media (max-width: 767px) { .home-layout { grid-template-columns: 1fr; } }

/* ツール別ガイド：入力から確認・成果物までをHTMLで読める図解。 */
.tool-group { margin-top: var(--s-6); }
.tool-group h2 { font-size: var(--fs-1); margin-bottom: var(--s-4); }
.guide-content { margin-top: var(--s-5); }
.tool-guide { padding: var(--s-5); background-color: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--tool); border-radius: var(--r-md); }
.guide-intro > p { max-width: 34em; }
.guide-tagline { font-size: var(--fs-1); font-weight: 700; margin-bottom: var(--s-3); }
.guide-news-note { margin-top: var(--s-3); color: var(--muted); font-size: var(--fs--1); }
.guide-usecase { margin-top: var(--s-6); }
.guide-usecase h3, .guide-caution h3 { font-size: var(--fs-0); margin-bottom: var(--s-2); }
.guide-usecase > p { max-width: 34em; }
.guide-caution { margin-top: var(--s-5); padding: var(--s-4); background-color: var(--surface); border-radius: var(--r-sm); }
.guide-caution p { font-size: var(--fs--1); max-width: 34em; }
.flow-diagram { margin: var(--s-5) 0 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background-color: var(--surface); }
.flow-diagram figcaption { font-size: var(--fs--1); font-weight: 700; margin-bottom: var(--s-4); }
.flow-kind { font-weight: 400; color: var(--muted); margin-left: var(--s-2); }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; gap: var(--s-5); }
.workflow-step { position: relative; padding: var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs--1); background-color: var(--paper); overflow-wrap: anywhere; }
.workflow-step + .workflow-step::before { content: "→"; position: absolute; right: 100%; width: var(--s-5); top: var(--s-3); text-align: center; font-size: var(--fs-1); color: var(--ink); }
.step-number { display: block; color: var(--muted); font-size: var(--fs--2); margin-bottom: var(--s-2); }
.workflow-step[aria-current="step"] { background-color: var(--amber-tint); border-color: var(--ink); outline: 2px solid var(--ink); }
.flow-play { margin-top: var(--s-4); padding: var(--s-2) var(--s-3); min-height: 44px; color: var(--ink); background-color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--fs--1); cursor: pointer; }
.flow-status:not(:empty) { margin-top: var(--s-3); }
.no-js .flow-play { display: none; }
.home-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-3); }
.home-tools a { font-size: var(--fs--1); height: 100%; }
@media (max-width: 1023px) {
  .workflow { grid-template-columns: 1fr; }
  .workflow-step + .workflow-step::before { content: "↓"; top: auto; bottom: 100%; left: 0; width: 100%; height: var(--s-5); }
}
@media (max-width: 767px) {
  .tool-guide { padding: var(--s-4); }
}
.empty {
  margin-top: var(--s-5); padding: var(--s-6);
  background-color: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--r-md);
}
.empty-title { font-size: var(--fs-1); font-weight: 700; }
.empty-hint { margin-top: var(--s-2); color: var(--muted); }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); padding: 0 var(--s-5);
  border-radius: var(--r-sm); background-color: var(--ink); color: var(--on-band); text-decoration: none; font-weight: 700;
}
.btn:hover { background-color: var(--band-2); color: var(--on-band); }
.site-foot { border-top: 1px solid var(--line); padding-block: var(--s-6); color: var(--muted); font-size: var(--fs--1); }
.site-foot a { color: var(--muted); }
.site-foot p + p { margin-top: var(--s-2); }

/* ---------- スマホ（767px以下） ---------- */
/* ---------- 画面幅ごとの版面（web.md: ブレークポイントは 768 / 1024 の2つ） ---------- */
@media (min-width: 768px) {
  :root { --container: calc(100vw - 48px); }          /* タブレット: 左右24px */
}
@media (min-width: 1024px) {
  :root { --container: min(1200px, 100vw - 96px); }   /* PC: 最大1200px・左右48px以上 */
  .item-grid { grid-template-columns: 1.8fr 1fr; gap: var(--s-7); }
}

@media (max-width: 767px) {
  .head-top { flex-wrap: wrap; min-height: 48px; padding-block: var(--s-3) var(--s-2); gap: var(--s-3); }
  .brand { width: 100%; }
  .search { width: 100%; }
  .mode a { flex: 1; justify-content: center; }
  .main { padding-top: var(--s-6); }
  .page-title { font-size: var(--fs-2); }
  .feature { padding: var(--s-5) var(--s-4) var(--s-4); }
  .feature .row-title { font-size: var(--fs-1); }
  .feature-points li, .points li { padding-left: var(--s-7); }
  .points { padding: var(--s-4); }
  .ic-box { display: none; }
  .item > summary { gap: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-3) var(--s-4); }
  .item-body { padding: var(--s-4) var(--s-4) var(--s-5); }
  .item-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .row { padding-right: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .chev::before, .row, .item, .item > summary, .feature-go { transition: none; }
  .row:hover { transform: none; }
}

.weeks.is-list { margin-top: var(--s-6); }
.title, .page-title, .row-title, .empty-title { word-break: auto-phrase; }

/* 読む前の判断材料と、出典に結び付いたXの観測値。既存のStripe系の版面を継続。 */
.preview { color: var(--muted); font-size: var(--fs--1); line-height: var(--lh-body); max-width: 34em; }
.priority { color: var(--ink); background-color: var(--amber-tint); padding-inline: var(--s-2); border-radius: var(--r-sm); font-weight: 700; }
.x-signal { color: var(--muted); font-size: var(--fs--1); }
.selection-reason { margin-top: var(--s-3); font-size: var(--fs--1); color: var(--muted); max-width: 34em; }
.selection-reason strong { color: var(--ink); }
.list-note { font-size: var(--fs--1); color: var(--muted); margin-bottom: var(--s-4); }
.is-list .list-note, .is-list .research-guide { display: none; }
.x-evidence { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.x-post + .x-post { margin-top: var(--s-5); }
.x-metrics { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-3) 0; }
.x-metrics > div { min-width: var(--s-8); }
.x-metrics dt { color: var(--muted); font-size: var(--fs--1); }
.x-metrics dd { margin: 0; font-size: var(--fs-1); font-weight: 700; }
.evidence-note { color: var(--muted); font-size: var(--fs--1); line-height: var(--lh-body); max-width: 34em; overflow-wrap: anywhere; }
.editorial-guide { margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background-color: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.editorial-guide > summary { cursor: pointer; font-weight: 700; min-height: var(--s-6); }
.editorial-guide > p { margin-top: var(--s-3); max-width: 34em; }
.candidate-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.candidate-list li + li { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.candidate-decision { color: var(--muted); font-size: var(--fs--1); margin-bottom: var(--s-1); }
.policy-view { max-width: 780px; }
.policy-block { margin-top: var(--s-6); }
.policy-block h2 { font-size: var(--fs-1); margin-bottom: var(--s-4); }
.policy-block p { max-width: 34em; }
.policy-block p + p { margin-top: var(--s-3); }
.policy-steps { padding-left: var(--s-5); margin-block: 0 var(--s-4); }
.policy-steps li + li { margin-top: var(--s-4); }
.policy-steps strong { display: block; }
.watchlist { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.watchlist li { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.watchlist span { font-size: var(--fs--1); color: var(--muted); }
.label-guide { margin: 0; }
.label-guide dt { font-weight: 700; }
.label-guide dd { margin: var(--s-1) 0 var(--s-4); max-width: 34em; }
@media (max-width: 767px) {
  .editorial-guide { padding: var(--s-4); }
  .mode a { padding-inline: var(--s-2); font-size: var(--fs--1); }
}