/* やりたいことから操作を探す一覧。色はテーマの --asobi-* を使い、見出しと表は記事と同じテーマの形を使う。 */
.asobi-howto { font-size: 1rem; }
.entry-content .asobi-howto__bar > * + * { margin-top: 0; }
.asobi-howto__bar { padding: 1rem; border: 1px solid var(--asobi-border, #e2e6eb); border-radius: var(--asobi-radius, 12px); background: var(--asobi-bg, #fff); }
.asobi-howto__search { box-sizing: border-box; width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--asobi-border, #e2e6eb); border-radius: var(--asobi-radius-sm, 8px); background: #fff; color: var(--asobi-text, #1c1f24); font: inherit; font-size: 1.1rem; }
.asobi-howto__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.7rem !important; }
.asobi-howto__filter button { padding: 0.25rem 0.75rem; border: 1px solid var(--asobi-border, #e2e6eb); border-radius: 999px; background: #fff; color: var(--asobi-text, #1c1f24); font: inherit; font-size: 0.875rem; line-height: 1.6; cursor: pointer; }
.asobi-howto__filter button:hover { border-color: var(--asobi-accent, #d64545); color: var(--asobi-accent-strong, #b83232); }
.asobi-howto__filter button[aria-pressed="true"] { border-color: var(--asobi-accent, #d64545); background: var(--asobi-accent, #d64545); color: #fff; }
.asobi-howto button:focus-visible, .asobi-howto__search:focus-visible { outline: 3px solid var(--asobi-focus, #1b5fb8); outline-offset: 2px; }
.asobi-howto__count { margin: 0.7rem 0 0 !important; color: var(--asobi-muted, #5b6470); font-size: 0.85rem; }
.asobi-howto__card[hidden], .asobi-howto__way[hidden] { display: none; }
.asobi-howto__card .wp-block-table { margin: 0.8rem 0 0; }
.asobi-howto__card table { width: 100%; }
.asobi-howto__way-type { width: 6.5em; font-weight: 700; white-space: nowrap; vertical-align: top; }
.asobi-howto__wbody p { margin: 0; line-height: 1.7; }
.entry-content .asobi-howto__wbody p + p { margin-top: 0.3rem; }
.asobi-howto__code { display: block; margin-top: 0.3rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.asobi-howto__copy { margin-left: 0.4rem; padding: 0 0.5rem; border: 1px solid var(--asobi-border, #e2e6eb); border-radius: 999px; background: #fff; color: var(--asobi-muted, #5b6470); font: inherit; font-size: 0.75rem; line-height: 1.7; cursor: pointer; }
.asobi-howto__copy:hover { border-color: var(--asobi-accent, #d64545); color: var(--asobi-accent-strong, #b83232); }
.asobi-howto__wbody .asobi-howto__status { color: var(--asobi-muted, #5b6470); font-size: 0.8rem; }
.asobi-howto__tip { margin: 0.6rem 0 0 !important; color: var(--asobi-muted, #5b6470); font-size: 0.9rem; line-height: 1.7; }
.asobi-howto__todo { color: var(--asobi-accent-strong, #b83232); font-size: 0.8rem; }
@media (max-width: 480px) {
	.asobi-howto__bar { padding: 0.8rem; }
	.asobi-howto__way-type { width: auto; font-size: 0.8125rem; }
}