/* ai-dougubako.com — 静的HTMLに一枚のCSS。ウェブフォント・外部リクエストなし。スクリプトは検索・絞り込み・コピーの一本だけ(/assets/site.js、動かない環境は nojs.css)。
   書体は端末のゴシック体だけ(明朝は使わない)。面は平ら: 影・グラデーション・ぼかしを置かず、1pxの線と余白で区切る。
   色は :root のトークンだけで決める。ライト固定: 端末がダークでも同じ見た目にする(ダークの一式は持たない)。
   リンクの決まり: 本文とカードの中は青+下線、ナビゲーション(上部・目次・フッター・カードの題)は墨で下線なし。
   色の役割(2026-10-30): 墨(--ink)と黄(--marker)は道具箱の配色 — 黄は「約束(ホーム上部)」「できあがるもの(結果)」「結果のサムネイル」「STEP」「コピーの入口」だけに塗る、つまり『持ち帰る価値のある所』の印。
   紙は黄に寄せた温かい白(--paper)。灰色の紙の上では黄が濁って見えるため。影・グラデーションは使わない。
   面(face): ヘッダーは .site-header.ink。名前とマークの色は content/site.json の faces が決める(HTMLが持つ)。 */

:root {
  color-scheme: light;
  --paper: #faf6e6;
  --surface: #fff;
  --ink: #0f1013;
  --ink-2: #181a1f;
  --ink-3: #2a2d34;
  --text: #101114;
  --muted: #5c5747;
  --line: #e4dcc0;
  --control-line: #7d7762;
  --soft: #f0e9cd;
  --on-ink: #fff;
  --on-ink-soft: #c9ccd3;
  --on-ink-dim: #9aa0aa;
  --marker: #ffd21f;
  --marker-soft: #ffe676;
  --link: #284fa8;
  --link-hover: #1f3d83;
  /* Windows は Yu Gothic の Regular が細く、font-synthesis: none では太字を合成できないので Meiryo を先に置く */
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "Yu Gothic", "Noto Sans JP", sans-serif;
  font-synthesis: none;
  line-height: 1.8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; color: var(--text); background: var(--paper); line-break: strict; }
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, pre:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.5; font-weight: 700; }
h1 { font-size: 2rem; letter-spacing: .01em; text-wrap: balance; }
h2 { font-size: 1.5rem; letter-spacing: .01em; }
h3 { font-size: 1.125rem; line-height: 1.6; }
p + p { margin-top: 16px; }
button, input, summary { font: inherit; }
ul, ol { padding-left: 1.5em; }
li + li { margin-top: 8px; }
a, summary { touch-action: manipulation; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; }
time { font-variant-numeric: tabular-nums; }

/* 日本語の文節折り返し: ビルドが文節の間に <wbr> を入れる。keep-all で文節の中では折らない */
.ph { word-break: keep-all; overflow-wrap: anywhere; }
/* 한 덩어리로 줄 끝에서 통째로 넘어가되, 글자 크기 200% 처럼 한 줄보다 넓어지면 그때만 안에서 꺾인다 */
.nw { display: inline-block; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }

.skip-link { position: absolute; left: 8px; top: -64px; z-index: 10; padding: 10px 16px; background: var(--surface); color: var(--text); border: 1px solid var(--control-line); border-radius: 8px; }
.skip-link:focus { top: 8px; }

/* ---- 枠 ---- */
.shell { width: min(1080px, calc(100% - 32px)); margin-inline: auto; }

/* ---- 部品: ボタン・チップ・マーク ---- */
.mark { display: block; flex-shrink: 0; }

.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; border: 1px solid var(--control-line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .875rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.chip.dk { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip.work { border-color: var(--marker-soft); background: var(--marker-soft); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 8px; font-size: 1rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; }
.btn.dk { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn.dk:hover { background: var(--ink-3); border-color: var(--ink-3); color: var(--on-ink); }
.btn.lt { background: var(--surface); border-color: var(--control-line); color: var(--text); }
.btn.lt:hover { background: var(--soft); color: var(--text); }
.btn.wh { background: var(--surface); color: var(--text); }
.btn.wh:hover { background: var(--soft); color: var(--text); }
.btn.wide { display: flex; width: 100%; min-height: 48px; margin-top: 12px; }
.btn.pending { border: 1px dashed var(--control-line); background: var(--paper); color: var(--muted); font-size: .875rem; cursor: default; }

.box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sub { color: var(--muted); font-size: .875rem; line-height: 1.7; }
.ext-link::after { content: " ↗"; content: " ↗" / ""; }
/* 글자 크기 200% 에서 노란 띠의 구절이 화면 밖으로 나가지 않게: 구절 안에서도 넘칠 때만 꺾인다(.ph 의 overflow-wrap) */
.mk .nw { display: inline; max-width: none; }
.mk { background: var(--marker); color: var(--ink); padding: 2px 10px; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 24px; }

/* ---- ヘッダー ---- */
.site-header.ink { background: var(--ink); color: var(--on-ink); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.brand:hover { color: inherit; }
.site-header .brand { min-height: 64px; }
.site-header.ink .brand, .site-footer .brand { color: var(--on-ink); }
/* SNS 아이콘: 머리와 푸터 오른쪽. 한 개가 44px 탭 영역이고, 준비중 채널은 그리지 않는다. 아이콘이 フォロー 를 맡는다(별도 버튼 없음) */
.sns { display: flex; align-items: center; margin-right: -11px; }
.sns a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--on-ink); font-size: .875rem; font-weight: 700; text-decoration: none; }
.sns a:hover { color: var(--on-ink-soft); }
.site-header a:focus-visible, .site-footer a:focus-visible { outline-color: var(--on-ink); }

/* ---- フッター ---- */
.site-footer { background: var(--ink); color: var(--on-ink); border-top: 6px solid var(--marker); padding: 28px 0 32px; font-size: .875rem; line-height: 1.7; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.footer-links, .footer-meta { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer-links { margin-top: 6px; }
.footer-meta { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ink-3); }
.footer-links a, .footer-meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); text-decoration: none; }
.footer-links a:hover, .footer-meta a:hover { text-decoration: underline; }
.footer-note { margin-top: 12px; color: var(--on-ink-dim); }

/* ---- ホーム ---- */
/* ホーム上部: 黄の一面に墨の約束。二行目は墨地に黄文字(マーカーの反転) */
.hero { padding: 20px 0 22px; background: var(--marker); color: var(--ink); }
.hero h1 { margin-top: 0; font-size: 1.875rem; line-height: 1.45; letter-spacing: 0; color: var(--ink); }
.marker-line { margin-top: 12px; font-size: 1rem; font-weight: 700; line-height: 2; }
.hero .mk { background: var(--ink); color: var(--marker); padding: 4px 10px; border-radius: 4px; }
.hero .search { margin-top: 16px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.meta time { color: var(--muted); font-size: .875rem; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-head h2 { font-size: 1.25rem; letter-spacing: 0; }
.more { font-size: .875rem; white-space: nowrap; }

.post-list { margin: 8px 0 0; padding: 0; list-style: none; }
.post-list > li { margin: 0; }
.post-row { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.post-row:hover .post-title { text-decoration: underline; }
.post-text { flex: 1; min-width: 0; }
.post-title { display: block; margin-top: 6px; font-weight: 700; line-height: 1.55; }
.post-excerpt { display: block; margin-top: 2px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.thumb { position: relative; flex-shrink: 0; width: 72px; height: 72px; overflow: hidden; border-radius: 8px; background: var(--ink); }
.thumb .mark { position: absolute; left: 8px; top: 8px; }
.thumb .glyph { position: absolute; left: 8px; bottom: 6px; color: var(--on-ink); font-size: 1.25rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.thumb.s64 { width: 64px; height: 64px; }
.thumb.s64 .glyph { font-size: 1.125rem; }

.chip-links { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 6px -3px 0; }
.chip-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 3px; text-decoration: none; }
.chip-links .chip { border-color: var(--soft); background: var(--soft); }

.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.tile-grid > li { margin: 0; }
.tile-grid.single { grid-template-columns: minmax(0, 1fr); margin-top: 10px; }
.tool-tile { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px; }
.tool-tile h3 { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.tool-tile h3 a { color: var(--text); text-decoration: none; }
.tool-tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.tool-tile h3 a:focus-visible { outline: none; }
.tool-tile h3 a:focus-visible::after { outline: 3px solid var(--link); outline-offset: 2px; }
.tool-tile p { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.tool-tile .ext-link { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding-top: 4px; font-size: .875rem; line-height: 1.5; }

/* ---- ガイドの図書館: 検索・絞り込み・カード ---- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.search-field { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 4px 14px; background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; }
.search-field::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--ink); -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.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 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.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat; }
.search-field:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
.hero .search-field:focus-within { outline-color: var(--ink); }
.search-field input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-go { min-height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--ink); color: var(--on-ink); font-size: .9375rem; font-weight: 700; cursor: pointer; }
.search-go:hover { background: var(--ink-3); }
.search-go:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.chip .n { margin-left: 6px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.chip.soft { border-color: var(--soft); background: var(--soft); }
.chip.ai { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }

.lib-controls { margin-top: 12px; }
.filter-group + .filter-group { margin-top: 2px; }
.filter-label { color: var(--muted); font-size: .875rem; font-weight: 700; line-height: 1.4; }
/* 狭い画面では칩 한 줄을 옆으로 밀어 보게 한다(가로 스크롤은 이 줄 안에서만) — 화면 끝에서 칩이 잘려 보이는 것이 「더 있다」의 신호 */
.filter-row { display: flex; gap: 4px; margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-row::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer; }
a.chip-btn { text-decoration: none; }
.chip-btn:focus-visible { outline: none; }
.chip-btn:focus-visible .chip { outline: 3px solid var(--link); outline-offset: 2px; }
.chip-btn .chip { min-height: 36px; padding: 0 14px; border-color: var(--control-line); background: var(--surface); }
.chip-btn:hover .chip { border-color: var(--ink); background: var(--surface); }
.chip-btn[aria-pressed="true"] .chip { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip-btn[aria-pressed="true"] .chip .n { color: var(--on-ink-soft); }

.lib-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-top: 4px; }
.lib-count p { margin: 0; color: var(--muted); font-size: .875rem; }
.lib-count strong { color: var(--text); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.lib-count .of { margin-left: 4px; }
.reset { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--link); font-size: .875rem; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.reset:hover { color: var(--link-hover); }
.reset:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.guide-grid > li { margin: 0; }
.gcard { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.gcard:hover { border-color: var(--ink); }
.gcard-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gcard-chips .chip { min-height: 26px; padding: 2px 10px; }
.gcard-title { font-size: 1.25rem; line-height: 1.45; }
.gcard-title a { color: var(--text); text-decoration: none; }
.gcard-title a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.gcard-title a:focus-visible { outline: none; }
.gcard-title a:focus-visible::after { outline: 3px solid var(--link); outline-offset: 2px; }
.gcard-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: .875rem; line-height: 1.65; }
/* 결과 예: 입력 → 결과 두 줄. 결과물이 있는 가이드에만 나온다 */
.gcard-eg { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--marker-soft); font-size: .875rem; line-height: 1.6; }
.gcard-eg .eg-row { display: flex; gap: 10px; min-width: 0; }
.gcard-eg b { flex: none; width: 2.6em; color: var(--ink); font-weight: 700; }
.gcard-eg .eg-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.gcard-eg .out > span { color: var(--text); font-weight: 700; }
.gcard-thumb { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; margin-top: 2px; border-radius: 10px; background: var(--marker); }
.gcard-meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: auto; padding-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.more-row { display: flex; justify-content: center; margin: 16px 0 0; }
.more-row .btn { min-width: 220px; }
.empty { margin-top: 12px; padding: 20px 16px; text-align: center; }
.empty p { color: var(--muted); font-size: .9375rem; }
.empty .btn { margin-top: 12px; }
.library { padding-bottom: 40px; }
.library .list-end { margin-top: 20px; }

/* ---- 一覧ページ ---- */
.page-head { padding-top: 24px; }
.page-head h1 { font-size: 1.625rem; letter-spacing: 0; }
.page-head .sub { margin-top: 2px; }
.page-head.solo { padding-bottom: 64px; }
.page-head .actions { margin-top: 20px; }
.filterable { padding-bottom: 36px; }
.target-mark { display: block; height: 0; scroll-margin-top: 12px; }
.count-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.count { display: none; color: var(--muted); font-size: .875rem; }
.filterable .count-all { display: inline; }
.month { font-size: 1rem; font-variant-numeric: tabular-nums; }
.count-row + .month, .filterable > .month { margin-top: 14px; }
.list-end { margin-top: 0; padding: 16px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; line-height: 1.7; }
.tool-list { margin: 2px 0 0; padding: 0; list-style: none; }
.tool-row { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.tool-row:first-child { border-top: 0; }
.tool-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tool-row-head h3 { font-size: 1.125rem; line-height: 1.5; }
.tool-row-head h3 a { color: var(--text); text-decoration: none; }
.tool-row-head h3 a:hover { text-decoration: underline; }
.tool-row p { margin-top: 2px; font-size: .9375rem; line-height: 1.7; }
.text-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.text-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }

/* 絞り込み: リンクの #f-<id> を :target で受ける(スクリプトなし)。:has 非対応の古いブラウザでは全件が見える。
   id は content/site.json の formats・uses と同じ — 足したらここにも足す(site.test.mjs が見る) */
.filterable:not(:has(.target-mark:target)) .filter-chips .chip-filter.all .chip,
.filterable:has(#f-all:target) .filter-chips .chip-filter.all .chip { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.filterable:has(#f-top-n:target) .filter-item:not([data-f="top-n"]),
.filterable:has(#f-tool:target) .filter-item:not([data-f="tool"]),
.filterable:has(#f-howto:target) .filter-item:not([data-f="howto"]),
.filterable:has(#f-case:target) .filter-item:not([data-f="case"]),
.filterable:has(#f-video:target) .filter-item:not([data-f="video"]),
.filterable:has(#f-image:target) .filter-item:not([data-f="image"]),
.filterable:has(#f-code:target) .filter-item:not([data-f="code"]),
.filterable:has(#f-text:target) .filter-item:not([data-f="text"]),
.filterable:has(#f-other:target) .filter-item:not([data-f="other"]),
.filterable:has(#f-analysis:target) .filter-item:not([data-f="analysis"]) { display: none; }
.filterable:has(#f-top-n:target) .filter-chips a[data-chip="top-n"] .chip,
.filterable:has(#f-tool:target) .filter-chips a[data-chip="tool"] .chip,
.filterable:has(#f-howto:target) .filter-chips a[data-chip="howto"] .chip,
.filterable:has(#f-case:target) .filter-chips a[data-chip="case"] .chip,
.filterable:has(#f-video:target) .filter-chips a[data-chip="video"] .chip,
.filterable:has(#f-image:target) .filter-chips a[data-chip="image"] .chip,
.filterable:has(#f-code:target) .filter-chips a[data-chip="code"] .chip,
.filterable:has(#f-text:target) .filter-chips a[data-chip="text"] .chip,
.filterable:has(#f-other:target) .filter-chips a[data-chip="other"] .chip,
.filterable:has(#f-analysis:target) .filter-chips a[data-chip="analysis"] .chip { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.filterable:has(#f-top-n:target, #f-tool:target, #f-howto:target, #f-case:target, #f-video:target, #f-image:target, #f-code:target, #f-analysis:target, #f-text:target, #f-other:target) .chip-filter.all .chip { background: var(--soft); border-color: var(--soft); color: var(--text); }
.filterable:has(#f-top-n:target, #f-tool:target, #f-howto:target, #f-case:target, #f-video:target, #f-image:target, #f-code:target, #f-analysis:target, #f-text:target, #f-other:target) .count-all { display: none; }
.filterable:has(#f-top-n:target) .count-top-n,
.filterable:has(#f-tool:target) .count-tool,
.filterable:has(#f-howto:target) .count-howto,
.filterable:has(#f-case:target) .count-case,
.filterable:has(#f-video:target) .count-video,
.filterable:has(#f-image:target) .count-image,
.filterable:has(#f-code:target) .count-code,
.filterable:has(#f-text:target) .count-text,
.filterable:has(#f-other:target) .count-other,
.filterable:has(#f-analysis:target) .count-analysis { display: inline; }

.filterable:has(#f-top-n:target) .month-group:not(:has(.filter-item[data-f="top-n"])),
.filterable:has(#f-tool:target) .month-group:not(:has(.filter-item[data-f="tool"])),
.filterable:has(#f-howto:target) .month-group:not(:has(.filter-item[data-f="howto"])),
.filterable:has(#f-case:target) .month-group:not(:has(.filter-item[data-f="case"])),
.filterable:has(#f-video:target) .month-group:not(:has(.filter-item[data-f="video"])),
.filterable:has(#f-image:target) .month-group:not(:has(.filter-item[data-f="image"])),
.filterable:has(#f-code:target) .month-group:not(:has(.filter-item[data-f="code"])),
.filterable:has(#f-text:target) .month-group:not(:has(.filter-item[data-f="text"])),
.filterable:has(#f-other:target) .month-group:not(:has(.filter-item[data-f="other"])),
.filterable:has(#f-analysis:target) .month-group:not(:has(.filter-item[data-f="analysis"])) { display: none; }

/* ---- 記事・道具の詳細 ---- */
.article { padding-top: 14px; padding-bottom: 40px; }
.article.shell { width: min(760px, calc(100% - 32px)); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 32px; margin-bottom: 6px; color: var(--muted); font-size: .875rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.article h1 { margin-top: 10px; font-size: 1.5rem; line-height: 1.55; letter-spacing: 0; }
.lead { margin-top: 12px; font-size: .9375rem; line-height: 1.8; }
.lead + .lead, p.lead + p { margin-top: 12px; }
.post-stats { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 8px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.post-stats time { color: inherit; }
/* 「できあがるもの」: 상세의 첫 화면. 墨 면 위에 결과 한 문장과, 있으면 입력·결과 예(흰 칸) — 가장 무겁게 그려지는 것이 이 가이드의 가치 순간이다 */
.outcome { margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--marker); color: var(--ink); }
.outcome-label { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--ink); color: var(--marker); font-size: .875rem; font-weight: 700; line-height: 1.6; }
.outcome-text { margin-top: 8px; font-size: 1.25rem; font-weight: 700; line-height: 1.55; }
.outcome-eg { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--surface); color: var(--text); }
.outcome-eg p { display: flex; gap: 12px; margin: 0; font-size: .9375rem; line-height: 1.7; }
.outcome-eg p + p { margin-top: 6px; }
.outcome-eg b { flex: none; width: 2.6em; color: var(--muted); font-size: .875rem; font-weight: 700; }
.outcome-eg span { min-width: 0; }
.outcome-eg .out span { font-weight: 700; }
/* 결과 도식(hero): 墨 상자 안의 흰 패널 — 이 가이드가 보이는 결과다. 이미지는 자작 도식(出力イメージ 배지가 그림 안에 있다) */
.outcome-fig { margin: 12px 0 0; }
.outcome-fig img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--surface); }
.outcome-fig figcaption { margin-top: 8px; color: var(--ink); font-size: .875rem; line-height: 1.6; }
.fig-label { margin-right: 8px; padding: 1px 10px; border-radius: 999px; background: var(--ink); color: var(--marker); font-size: .875rem; font-weight: 700; }
/* 「公式資料をもとに整理」: 실행하지 않은 가이드의 정직 표기. 작게, 그러나 첫 화면 근처에 */
.basis { margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .875rem; line-height: 1.7; }
.basis p { margin: 0; }
.basis-title { font-weight: 700; }
.basis-src { margin-top: 2px; color: var(--muted); }
.basis-pill { color: var(--text); font-weight: 700; text-decoration-color: var(--marker); text-decoration-thickness: 3px; }
.basis-pill:hover { color: var(--text); text-decoration-thickness: 4px; }
/* 본문 도식(figure)과 짧은 무음 루프(demo): 폭·높이를 선언해 밀리지 않고, 지연 로드한다 */
.fig, .demo { margin: 14px 0 0; }
.fig img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 12px; background: var(--marker-soft); }
.fig figcaption, .demo figcaption { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.demo-frame { position: relative; max-width: 420px; }
.demo-frame video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--marker); }
.demo-toggle { position: absolute; right: 10px; bottom: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .875rem; font-weight: 700; cursor: pointer; }
.demo-toggle:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* まず貼るプロンプト(7칸): 접힌 상자. 바꿀 칸은 하나 — 노란 띠 */
.prompt7 { margin-top: 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); overflow: hidden; }
.prompt7 > summary { background: var(--marker-soft); }
.prompt7[open] > summary { border-bottom: 2px solid var(--ink); }
.prompt7 > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; }
.sum-text { display: flex; flex-direction: column; gap: 0; }
.prompt7 > summary::-webkit-details-marker { display: none; }
.prompt7 > summary::after { content: "＋"; flex: none; font-size: 1.25rem; font-weight: 700; }
.prompt7[open] > summary::after { content: "－"; }
.sum-title { font-weight: 700; }
.sum-note { color: var(--ink); font-size: .875rem; }
.prompt7 .copy { margin: 0; padding: 0 16px 16px; }
.prompt7 .copy-text { padding: 4px 14px; }
.slot { padding: 10px 0; }
.slot + .slot { border-top: 1px solid var(--line); }
.slot-k { color: var(--muted); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.slot-edit { margin-left: 8px; padding: 0 8px; background: var(--ink); color: var(--marker); border-radius: 4px; }
.slot-v { margin: 2px 0 0; font-size: .9375rem; line-height: 1.75; }
.slot.edit .slot-v { background: var(--marker-soft); border-radius: 6px; padding: 2px 8px; }
.prompt7 + .toc-card, .callout-box + .prompt7 { margin-top: 14px; }
.disclosure { margin-top: 8px; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.prose > * + * { margin-top: 10px; }
.prose > h2, .prose > .step, .prose > .ranking, .prose > .share { margin-top: 28px; }
.prose h2, .ranking h2, .sources h2, .next h2 { font-size: 1.25rem; line-height: 1.55; letter-spacing: 0; }
.prose p, .list li { font-size: .9375rem; line-height: 1.8; }
.prose p { margin-top: 10px; }
.prose h2 + p, .prose h3 + p { margin-top: 6px; }
.list { margin: 10px 0 0; padding-left: 1.4em; }
.list li { margin-top: 6px; }
.toc-card { margin-top: 16px; padding: 6px 16px 4px; }
.toc-title { padding: 6px 0; font-size: .9375rem; font-weight: 700; }
.toc-card ol { margin: 0; padding: 0; list-style: none; }
.toc-card li { margin: 0; }
.toc-card a { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); color: var(--text); font-size: .9375rem; text-decoration: none; }
.toc-card a:hover span:not(.n) { text-decoration: underline; }
.toc-card .n { width: 22px; color: var(--muted); font-size: .875rem; }
.callout-box { margin-top: 14px; padding: 12px 16px; border: 1px solid var(--ink); border-radius: 12px; background: var(--surface); font-size: .9375rem; line-height: 1.75; }
.callout-box strong { margin-right: 2px; }
.step { scroll-margin-top: 16px; }
.step-no { display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--marker); color: var(--ink); font-size: .875rem; font-weight: 700; line-height: 1.6; }
.step h2, .step h3 { margin: 6px 0 0; font-size: 1.25rem; line-height: 1.55; letter-spacing: 0; }
.copy { margin-top: 10px; }
.copy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.copy-label { color: var(--muted); font-size: .875rem; line-height: 1.6; }
.copy-btn { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: var(--on-ink); font-size: .875rem; font-weight: 700; cursor: pointer; }
.copy-btn:hover { background: var(--ink-3); border-color: var(--ink-3); }
.copy-btn.done { background: var(--marker); border-color: var(--ink); color: var(--ink); }
.copy-btn:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.copy-text { margin: 0; padding: 12px 14px; border: 1px solid var(--control-line); border-radius: 8px; background: var(--surface); font-size: .9375rem; line-height: 1.75; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; word-break: auto-phrase; }
pre.copy-text { white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875rem; line-height: 1.7; }
pre.copy-text code { font-size: inherit; }
.result { margin-top: 10px; padding: 10px 16px; }
.result p { margin-top: 0; font-size: 1rem; line-height: 1.75; }
.result .result-label, .result-label { color: var(--muted); font-size: .875rem; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.compare .box { padding: 12px 16px; }
.compare .box p { margin-top: 0; font-size: 1rem; line-height: 1.75; }
.compare .after { border-color: var(--ink); }
.facts { margin-top: 6px; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.prose .facts { font-size: .875rem; }
.ranking .facts { margin-top: 2px; }
.ratio { margin-top: 6px; font-weight: 700; }
.rank-list { margin: 10px 0 0; padding: 0; list-style: none; }
.rank-item { margin: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rank-no { width: 30px; color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.rank-head h3 { font-size: 1.125rem; line-height: 1.5; }
.rank-head h3 a { color: var(--text); text-decoration: none; }
.rank-head h3 a:hover { text-decoration: underline; }
.rank-head .gain { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-item p { margin-top: 4px; font-size: .9375rem; line-height: 1.7; }
.rank-item .facts { margin-top: 2px; }
.plain { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; }
.plain th, .plain td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; background: var(--surface); }
.plain thead th { background: var(--soft); }
.plain tbody th { width: 11em; font-weight: 700; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--link); outline-offset: 4px; }
.fact-list { margin: 10px 0 0; border-top: 1px solid var(--line); }
.fact-list > div { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fact-list dt { width: 8em; color: var(--muted); font-size: .875rem; }
.fact-list dd { flex: 1; margin: 0; min-width: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.sources, .next, .share { margin-top: 28px; }
.closing { margin-top: 20px; font-weight: 700; }
.next .section-head + .guide-grid { margin-top: 8px; }
.sources .list li { font-size: .875rem; }
.share-title { font-size: 1rem; font-weight: 700; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.share-buttons .btn { min-width: 96px; }
.follow-card { margin-top: 28px; padding: 16px; }
.follow-card .sub { margin-top: 0; }
.follow-card .text-links { gap: 0 14px; margin-top: 6px; }
.follow-card .text-links a { font-size: .9375rem; }

/* ---- 広い画面 ---- */
@media (min-width: 700px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .gcard { padding: 20px; }
  .lib-controls .search { max-width: 640px; }
  .filter-group { display: flex; align-items: flex-start; gap: 16px; }
  .filter-group + .filter-group { margin-top: 0; }
  .filter-label { flex: none; width: 7em; padding-top: 11px; }
  .filter-row { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tile-grid.single { grid-template-columns: minmax(0, 1fr); }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .shell { width: min(1080px, calc(100% - 64px)); }
  .article.shell { width: min(760px, calc(100% - 64px)); }
  .header-inner { flex-wrap: nowrap; gap: 32px; }
  .site-header .brand { min-height: 72px; }
  .brand { font-size: 1.375rem; }
  .hero { padding-top: 24px; padding-bottom: 36px; }
  .hero h1 { margin-top: 0; font-size: 2.5rem; }
  .marker-line { margin-top: 16px; font-size: 1.375rem; }
  .hero .search { max-width: 640px; margin-top: 24px; }
  .gcard-title { font-size: 1.375rem; }
  .gcard-excerpt { font-size: .9375rem; }
  .gcard-eg { font-size: .9375rem; }
  .outcome { padding: 20px; }
  .outcome-text { font-size: 1.25rem; }
  .page-head { padding-top: 40px; }
  .page-head h1 { font-size: 2rem; }
  .article h1 { font-size: 2rem; }
  .site-footer { padding: 36px 0 40px; }
  .footer-links { gap: 0 28px; }
  .footer-meta { gap: 0 28px; }
}

@media (max-width: 700px) {
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.375rem; }

  .hub h1 { font-size: 1.625rem; }
  .hub .article h1 { font-size: 1.5rem; }
}

@media (max-width: 520px) {
  .fact-list dt { width: 100%; }
}

@media (max-width: 359px) {
  h1 { font-size: 1.625rem; }
}

/* ---- 動き: 色の変化だけ。動きを減らす設定では何も動かさない ---- */
@media (prefers-reduced-motion: no-preference) {
  a, .btn, .gcard, .copy-btn, .search-go { transition: color .12s ease-out, background-color .12s ease-out, border-color .12s ease-out; }
}