/* =========================================================
   THUMGY Data 機能説明書 – フロント（モックアップ「新デザイン」準拠）
   すべて .tm 配下に限定し、既存テーマの CSS と干渉しないようにする。
   ========================================================= */
:root {
	--tm-accent: #1d4ed8;
	--tm-text: #1f2937;
	--tm-text-2: #374151;
	--tm-muted: #4b5563;
	--tm-muted-2: #6b7280;
	--tm-line: #e5e7eb;
	--tm-line-2: #d1d5db;
	--tm-soft: #f3f4f6;
	--tm-soft-blue: #eef2ff;
	--tm-hero: #f4f6fa;
	--tm-dark: #111827;
	--tm-radius: 10px;
}

body.tm-body { margin: 0; background: #fff; }
.tm, .tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm {
	font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--tm-text);
	background: #fff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-size: 15px;
	line-height: 1.6;
}
.tm a { color: var(--tm-accent); text-decoration: none; }
.tm a:hover { color: #1e3a8a; }
.tm h1, .tm h2, .tm h3 { color: var(--tm-text); }
.tm .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- ボタン・共通 ---------- */
.tm-btn { font: inherit; font-weight: 700; font-size: 14px; color: #fff !important; background: var(--tm-accent); border: 0; border-radius: 6px; padding: 12px 22px; cursor: pointer; display: inline-block; }
.tm-btn:hover { filter: brightness(0.92); }
.tm-btn-sm { padding: 9px 14px; font-size: 13px; }
.tm-btn-outline { font: inherit; font-size: 14px; font-weight: 500; color: var(--tm-muted) !important; background: #fff; border: 1px solid var(--tm-line-2); padding: 8px 14px; border-radius: 6px; cursor: pointer; }
.tm-btn-outline:hover { background: var(--tm-soft); }
.tm-chip { background: #fff; border: 1px solid var(--tm-line-2); border-radius: 999px; padding: 4px 12px; color: var(--tm-text) !important; font-size: 13px; }
.tm-chip:hover { border-color: var(--tm-accent); }
.tm-tag { font-size: 12px; color: var(--tm-muted-2); }
.tm-muted { color: var(--tm-muted-2); font-size: 13px; }
.tm-empty { color: var(--tm-muted-2); padding: 16px 0; }

/* ---------- ヘッダー ---------- */
.tm-header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 14px 48px; border-bottom: 1px solid var(--tm-line); background: #fff; position: relative; z-index: 20; }
.tm-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--tm-text) !important; }
.tm-logo { width: 30px; height: 30px; border-radius: 6px; background: var(--tm-accent); }
.tm-brand-sub { font-weight: 400; color: var(--tm-muted-2); font-size: 14px; }
.tm-nav { display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; margin-left: auto; }
.tm-nav a { color: var(--tm-muted); }
.tm-nav a.is-active { color: var(--tm-dark); font-weight: 700; }
.tm-header-search + .tm-menu-toggle + .tm-nav { margin-left: 0; }
.tm-menu-toggle { display: none; font: inherit; font-size: 13px; background: #fff; border: 1px solid var(--tm-line-2); border-radius: 6px; padding: 6px 12px; margin-left: auto; cursor: pointer; }

/* ---------- 検索欄・候補 ---------- */
.tm-search { position: relative; display: flex; align-items: center; gap: 10px; }
.tm-search input { flex: 1; border: 0; outline: 0; font: inherit; min-width: 0; background: transparent; color: var(--tm-text); }
.tm-search-icon { color: var(--tm-muted-2); }
.tm-header-search { margin-left: auto; background: var(--tm-soft); border-radius: 6px; padding: 8px 14px; min-width: 280px; font-size: 14px; }
.tm-header-search:focus-within { box-shadow: 0 0 0 2px var(--tm-accent); }
.tm-hero-search { width: 100%; max-width: 720px; background: #fff; border: 1px solid var(--tm-line-2); border-radius: var(--tm-radius); padding: 6px 6px 6px 18px; gap: 12px; box-shadow: 0 4px 16px rgba(17, 24, 39, 0.06); }
.tm-hero-search:focus-within { border-color: var(--tm-accent); }
.tm-hero-search input { font-size: 16px; padding: 10px 0; }
.tm-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--tm-line); border-radius: 8px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12); max-height: 420px; overflow: auto; text-align: left; z-index: 50; }
.tm-suggest a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; color: var(--tm-text) !important; border-bottom: 1px solid var(--tm-soft); }
.tm-suggest a:last-child { border-bottom: 0; }
.tm-suggest a:hover, .tm-suggest a.is-active { background: var(--tm-soft-blue); }
.tm-suggest .s-title { font-weight: 700; font-size: 14px; }
.tm-suggest .s-meta { font-size: 12px; color: var(--tm-muted-2); }
.tm-suggest mark { background: #fef08a; color: inherit; padding: 0; }
.tm-suggest .s-empty { padding: 12px 14px; font-size: 13px; color: var(--tm-muted-2); }

/* ---------- トップ ---------- */
.tm-hero { background: var(--tm-hero); padding: 64px 48px 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.tm-hero h1 { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
.tm-hero > p { margin: 0; font-size: 16px; color: var(--tm-muted); }
.tm-popular { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; font-size: 13px; color: var(--tm-muted); }
.tm-section { padding: 48px 48px 16px; max-width: 1180px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.tm-section + .tm-section { padding-top: 32px; }
.tm-section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tm-section-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.tm-section-head a { font-size: 14px; }
.tm-cat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm-cat-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius); background: #fff; color: var(--tm-text) !important; min-height: 128px; transition: border-color .15s, box-shadow .15s; }
.tm-cat-card:hover { border-color: var(--tm-accent); box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06); }
.tm-cat-name { font-size: 16px; font-weight: 700; }
.tm-cat-desc { font-size: 13px; color: var(--tm-muted); line-height: 1.6; }
.tm-cat-meta { font-size: 12px; color: var(--tm-muted-2); margin-top: auto; }
.tm-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tm-start-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--tm-radius); background: var(--tm-soft-blue); color: var(--tm-text) !important; }
.tm-start-card:hover { filter: brightness(0.97); }
.tm-start-card > div:last-child { display: flex; flex-direction: column; gap: 4px; }
.tm-start-title { font-size: 15px; font-weight: 700; }
.tm-start-desc { font-size: 13px; color: var(--tm-muted); }
.tm-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tm-accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-split { flex-direction: row; flex-wrap: wrap; gap: 40px; padding-bottom: 64px; }
.tm-split h2 { margin: 0; font-size: 20px; font-weight: 700; }
.tm-recent { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tm-recent-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--tm-line); border-radius: 8px; color: var(--tm-text) !important; }
.tm-recent-row:hover { border-color: var(--tm-accent); }
.tm-recent-date { flex: none; font-size: 12px; color: var(--tm-muted-2); width: 84px; }
.tm-recent-title { flex: 1; font-size: 15px; font-weight: 500; }
.tm-learn { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tm-box { padding: 18px 20px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius); display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--tm-text-2); }
.tm-box > a { font-weight: 700; }
.tm-box + .tm-box { background: var(--tm-dark); border-color: var(--tm-dark); color: #fff; gap: 8px; }
.tm-box + .tm-box .tm-box-title { font-size: 15px; font-weight: 700; }
.tm-box + .tm-box .tm-muted { color: #d1d5db; }
.tm-box + .tm-box .tm-btn { align-self: flex-start; background: #fff; color: var(--tm-dark) !important; margin-top: 4px; }

/* ---------- 3カラム（機能ページ） ---------- */
.tm-layout { display: flex; flex-wrap: wrap; flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; min-width: 0; }
.tm-main { min-width: 0; }
.tm-content .wp-block-table, .tm-content pre { max-width: 100%; }
/* flex の子は既定で中身より小さくならない → 幅の広い表で画面がはみ出さないよう 0 にして表の中でスクロールさせる */
.tm-content > *,
.tm-content .tm-figure,
.tm-content .tm-figure > .wp-block-group__inner-container,
.tm-content .tm-figure figure.wp-block-table { min-width: 0; }
.tm-sidenav { flex: 1 1 260px; max-width: 272px; border-right: 1px solid var(--tm-line); padding: 24px 16px; font-size: 14px; }
.tm-sidenav-body { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.tm-sidenav-toggle { display: none; }
.tm-nav-group { display: flex; flex-direction: column; }
.tm-nav-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--tm-text) !important; font-weight: 500; }
.tm-nav-head:hover { background: var(--tm-soft); }
.tm-nav-group.is-open > .tm-nav-head { font-weight: 700; }
.tm-count { font-size: 12px; color: var(--tm-muted-2); font-weight: 400; }
.tm-nav-items { display: flex; flex-direction: column; padding-left: 8px; border-left: 2px solid var(--tm-line); margin: 2px 0 6px 12px; }
.tm-nav-items a { padding: 6px 10px; border-radius: 6px; color: var(--tm-muted) !important; font-size: 13px; }
.tm-nav-items a:hover { background: var(--tm-soft); }
.tm-nav-items a.is-current { color: var(--tm-accent) !important; background: var(--tm-soft-blue); font-weight: 700; }

.tm-article { flex: 999 1 560px; min-width: 0; padding: 28px 48px 64px; display: flex; flex-direction: column; gap: 22px; max-width: 808px; }
.tm-layout-2 .tm-article { max-width: none; }
.tm-breadcrumb { font-size: 13px; color: var(--tm-muted-2); display: flex; gap: 6px; flex-wrap: wrap; }
.tm-breadcrumb a { color: var(--tm-muted-2) !important; }
.tm-breadcrumb a:hover { color: var(--tm-accent) !important; }
.tm-breadcrumb [aria-current] { color: var(--tm-text); }
.tm-article-head { display: flex; flex-direction: column; gap: 10px; }
.tm-article-head h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3; }
.tm-lead { margin: 0; font-size: 15px; color: var(--tm-muted); line-height: 1.7; }
.tm-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--tm-muted-2); align-items: center; }
.tm-resources { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-res { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--tm-text) !important; border: 1px solid var(--tm-line-2); border-radius: 6px; padding: 9px 14px; }
.tm-res:hover { border-color: var(--tm-accent); }
.tm-res-pdf svg { color: #dc2626; }
.tm-res-video svg { color: var(--tm-accent); }
.tm-res-zip svg { color: #059669; }
.tm-video { position: relative; border-radius: var(--tm-radius); background: var(--tm-dark); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tm-video-embed iframe, .tm-video-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tm-videos { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.tm-video-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-video-tabs button { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--tm-line-2); background: #fff; color: var(--tm-text-2); cursor: pointer; }
.tm-video-tabs button[aria-selected="true"] { background: var(--tm-accent); border-color: var(--tm-accent); color: #fff; }
.tm-video-label { position: absolute; left: 16px; top: 14px; font-size: 13px; color: #d1d5db; }
.tm-play { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--tm-dark); transition: transform .15s; }
.tm-play svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 4px; }
.tm-video:hover .tm-play { transform: scale(1.08); }

/* 本文（Gutenberg の出力を整形） */
.tm-content { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.8; color: var(--tm-text-2); }
.tm-content > * { margin: 0; }
.tm-content h2, .tm-article > h2 { margin: 12px 0 0; font-size: 20px; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--tm-line); scroll-margin-top: 16px; }
.tm-content h3 { margin: 8px 0 0; font-size: 16px; font-weight: 700; }
.tm-content img { max-width: 100%; height: auto; }
.tm-content ul, .tm-content ol { padding-left: 1.5em; }
.tm-content table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tm-content .wp-block-table { overflow-x: auto; margin: 0; }
.tm-content th, .tm-content td { text-align: left; padding: 10px 12px; border: 1px solid var(--tm-line); vertical-align: top; }
.tm-content thead th, .tm-content thead td { background: var(--tm-soft); font-weight: 700; }
.tm-content figure { margin: 0; }
.tm-content figcaption { font-size: 13px; color: var(--tm-muted-2); margin-top: 6px; }
.tm-content .is-style-tm-note { border-left: 3px solid #f59e0b; background: #fffbeb; padding: 14px 18px; border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.7; color: #78350f; }
.tm-content .is-style-tm-shot img, .tm-content .tm-step img { border: 1px solid var(--tm-line); border-radius: 8px; background: #f9fafb; }
/* 操作手順（パターン「操作手順」）：番号付きの丸を自動表示 */
.tm-content .tm-steps { display: flex; flex-direction: column; gap: 20px; counter-reset: tm-step; }
.tm-content .tm-step { position: relative; padding-left: 44px; display: flex; flex-direction: column; gap: 10px; counter-increment: tm-step; }
.tm-content .tm-step > * { margin: 0; }
.tm-content .tm-step::before { content: counter(tm-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--tm-accent); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-content .tm-step h3 { margin: 2px 0 0; }

/* 機能説明書 YAML から生成した本文（manual_yaml_to_web.py） */
.tm-content h3 { padding-left: 10px; border-left: 3px solid var(--tm-accent); line-height: 1.4; }
.tm-content .tm-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 4px 0 0; border-radius: 999px; background: #c00000; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px; }
.tm-content p .tm-n, .tm-content .tm-bullets .tm-n, .tm-content .tm-notes .tm-n { margin: 0 2px; }
.tm-content ul.tm-notes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--tm-muted); }
.tm-content ul.tm-notes > li { position: relative; padding-left: 1.3em; }
.tm-content ul.tm-notes > li::before { content: "※"; position: absolute; left: 0; }
.tm-content ul.tm-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tm-content ul.tm-items > li { padding: 0 0 12px; border-bottom: 1px solid var(--tm-soft); }
.tm-content ul.tm-items > li:last-child { border-bottom: 0; }
.tm-content ul.tm-bullets { list-style: none; padding: 0 0 0 28px; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tm-content ul.tm-bullets > li { position: relative; padding-left: 1.1em; }
.tm-content ul.tm-bullets > li::before { content: "●"; position: absolute; left: 0; font-size: 9px; top: 0.45em; color: var(--tm-muted-2); }
.tm-content pre { margin: 0; padding: 12px 16px; background: #f8fafc; border: 1px solid var(--tm-line); border-radius: 8px; font-family: ui-monospace, Consolas, "Noto Sans JP", monospace; font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.tm-content pre.tm-code strong { color: var(--tm-accent); }
/* テーマが layout 非対応だと group の中身が .wp-block-group__inner-container で包まれるので、両方に効かせる */
.tm-content .tm-figure { padding: 16px; background: #f9fafb; border: 1px solid var(--tm-line); border-radius: var(--tm-radius); }
.tm-content .tm-figure,
.tm-content .tm-figure > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tm-content .tm-figure > .wp-block-group__inner-container { width: 100%; }
.tm-content .tm-figure-src, .tm-content .tm-figure-out { flex: 1 1 260px; min-width: 0; }
.tm-content .tm-figure-src,
.tm-content .tm-figure-out,
.tm-content .tm-figure-src > .wp-block-group__inner-container,
.tm-content .tm-figure-out > .wp-block-group__inner-container { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-content .tm-figure figure.wp-block-table { max-width: 100%; }
.tm-content .tm-figure-arrow { flex: none; font-size: 22px; color: var(--tm-muted-2); margin: 0; }
.tm-content .tm-figure figure.wp-block-table { display: flex; flex-direction: column; overflow-x: auto; }
.tm-content .tm-figure figcaption, .tm-content .tm-figure-caption { order: -1; margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--tm-text-2); }
.tm-content .tm-figure table { font-size: 13px; background: #fff; }
.tm-content .tm-figure th, .tm-content .tm-figure td { padding: 5px 8px; white-space: nowrap; }
.tm-content .is-style-tm-shot { margin: 4px 0; }
.tm-content .is-style-tm-shot img { width: 100%; box-shadow: 0 2px 10px rgba(17, 24, 39, 0.08); }
@media (max-width: 860px) {
	.tm-content .tm-figure { padding: 12px; }
	.tm-content .tm-figure,
	.tm-content .tm-figure > .wp-block-group__inner-container { flex-direction: column; align-items: stretch; }
	.tm-content .tm-figure-src, .tm-content .tm-figure-out { flex: none; width: 100%; }
	.tm-content .tm-figure-arrow { transform: rotate(90deg); margin: 0 auto; }
	.tm-content .is-style-tm-shot { max-width: 100% !important; }
}

.tm-related { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-related .tm-chip { border: 0; border-radius: 6px; background: var(--tm-soft); padding: 8px 14px; font-size: 14px; }
.tm-feedback { margin-top: 12px; padding: 18px 24px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tm-feedback > span:first-child { font-size: 15px; font-weight: 700; flex: 1; }
.tm-feedback-thanks { color: #047857; font-size: 14px; }

.tm-toc { flex: 1 1 200px; max-width: 220px; padding: 32px 24px; font-size: 13px; }
.tm-toc > * { display: block; }
.tm-toc { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; align-self: flex-start; }
.tm-toc-title { font-weight: 700; color: var(--tm-muted-2); font-size: 12px; }
.tm-toc a { color: var(--tm-muted) !important; padding: 4px 0 4px 12px; border-left: 2px solid transparent; }
.tm-toc a.is-active, .tm-toc a:first-of-type.is-active { color: var(--tm-text) !important; font-weight: 700; border-left-color: var(--tm-accent); }
.tm-prevnext { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tm-line); display: flex; flex-direction: column; gap: 6px; }
.tm-prevnext a { padding: 0; border: 0; color: var(--tm-muted-2) !important; }
.tm-prevnext a:hover { color: var(--tm-accent) !important; }

/* ---------- リスト（カテゴリ・検索結果） ---------- */
.tm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-list li { border: 1px solid var(--tm-line); border-radius: 8px; padding: 14px 18px; }
.tm-list li:hover { border-color: var(--tm-accent); }
.tm-list a { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--tm-text) !important; }
.tm-list-title { font-size: 16px; font-weight: 700; flex: 1; }
.tm-list p { margin: 6px 0 0; font-size: 13px; color: var(--tm-muted); }
.tm-list-flags { display: flex; gap: 6px; }
.tm-flag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--tm-soft); color: var(--tm-muted); }
.tm-flag-video { background: var(--tm-soft-blue); color: var(--tm-accent); }
.tm-search-page { max-width: 880px; width: 100%; margin: 0 auto; padding: 28px 24px 64px; display: flex; flex-direction: column; gap: 22px; }
.tm-search-page .tm-hero-search { max-width: none; }
.tm-search-title { font-size: 20px; margin: 8px 0 0; }

/* ---------- 関数リファレンス ---------- */
.tm-functions { max-width: 1180px; width: 100%; margin: 0 auto; padding: 40px 48px 64px; display: flex; flex-direction: column; gap: 24px; }
.tm-page-head h1 { margin: 0 0 8px; font-size: 30px; font-weight: 700; }
.tm-page-head p { margin: 0; color: var(--tm-muted); }
.tm-filter { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.tm-filter-search { flex: 1 1 320px; border: 1px solid var(--tm-line-2); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.tm-filter-search:focus-within { border-color: var(--tm-accent); }
.tm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-tabs button { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--tm-line-2); background: #fff; color: var(--tm-text-2); cursor: pointer; }
.tm-tabs button[aria-pressed="true"] { background: var(--tm-accent); border-color: var(--tm-accent); color: #fff; }
.tm-table-wrap { overflow-x: auto; border: 1px solid var(--tm-line); border-radius: var(--tm-radius); }
.tm-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.tm-table th { text-align: left; padding: 12px 16px; background: var(--tm-soft); font-weight: 700; white-space: nowrap; }
.tm-table td { padding: 12px 16px; border-top: 1px solid var(--tm-line); color: var(--tm-text-2); vertical-align: middle; }
.tm-table tr[hidden] { display: none; }
.tm-func-name { font-weight: 700; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.tm-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tm-icons { white-space: nowrap; }
.tm-icons { display: flex; gap: 6px; }
.tm-ico { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.tm-ico svg { width: 15px; height: 15px; }
.tm-ico-pdf { background: #fef2f2; color: #dc2626 !important; }
.tm-ico-video { background: var(--tm-soft-blue); color: var(--tm-accent) !important; }
.tm-ico-video svg { fill: currentColor; stroke: none; }
.tm-ico-zip { background: #ecfdf5; color: #059669 !important; }
.tm-table-note { font-size: 13px; color: var(--tm-muted-2); }

/* ---------- フッター ---------- */
.tm-footer { margin-top: auto; padding: 20px 48px; border-top: 1px solid var(--tm-line); font-size: 13px; color: var(--tm-muted-2); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1100px) {
	.tm-toc { display: none; }
	.tm-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.tm-header { padding: 12px 16px; }
	.tm-menu-toggle { display: inline-block; }
	.tm-nav { display: none; flex: 0 0 100%; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 8px 0; }
	.tm-nav.is-open { display: flex; }
	.tm-header-search { order: 5; flex: 0 0 100%; min-width: 0; }
	.tm-hero { padding: 40px 16px 32px; }
	.tm-hero h1 { font-size: 26px; }
	.tm-section, .tm-functions { padding-left: 16px; padding-right: 16px; }
	.tm-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tm-start-grid { grid-template-columns: 1fr; }
	/* wrap のままだと列幅が中身（広い表）に合わせて広がるので nowrap にする */
	.tm-layout { flex-direction: column; flex-wrap: nowrap; }
	.tm-sidenav, .tm-article { width: 100%; }
	.tm-sidenav, .tm-article { flex: none; }
	.tm-sidenav { max-width: none; border-right: 0; border-bottom: 1px solid var(--tm-line); padding: 12px 16px; }
	.tm-sidenav-toggle { display: block; width: 100%; font: inherit; font-size: 14px; text-align: left; background: var(--tm-soft); border: 0; border-radius: 6px; padding: 10px 12px; cursor: pointer; }
	.tm-sidenav-body { display: none; position: static; max-height: none; margin-top: 8px; }
	.tm-sidenav.is-open .tm-sidenav-body { display: flex; }
	.tm-article { padding: 20px 16px 48px; max-width: none; }
	.tm-article-head h1 { font-size: 24px; }
	.tm-footer { padding: 16px; }
}
@media (max-width: 520px) {
	.tm-cat-grid { grid-template-columns: 1fr; }
	.tm-hero-search .tm-btn { padding: 10px 14px; }
	.tm-recent-row { flex-wrap: wrap; gap: 4px 12px; }
	.tm-recent-title { flex-basis: 100%; order: 3; }
}