/*
* 記事用の装飾パーツ12種（見た目の正解は mock/blog-parts.html）。
* どれも「決まったクラス名を付けたコアブロック」の組み合わせ。書き方は tools/wp-theme/パーツの書き方.md と patterns/。
* 表側（記事・固定ページ）とブロックエディタ（add_editor_style）の両方で読む。色は濃紺と差し色（--sm-accent）だけ。
*/
/* 表側（blog.css）と同じ箱の数え方にそろえる（エディタの中は content-box が既定のため） */
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources),
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources) *,
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources) *::before,
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources) *::after,
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources)::before,
:is(.sm-voice, .sm-trigger, .sm-findings, .sm-sticky, ol.sm-steps, .sm-checklist, .is-style-sm-check-done, .is-style-sm-check-todo, .sm-caution, .wp-block-table[class*="is-style-sm-compare"], .wp-block-image.sm-figure, .sm-aside, .sm-sources)::after { box-sizing: border-box; }
/* 01 マーカー：段落の中の */
mark.sm-marker {
padding: 0;
color: inherit;
font-weight: 700;
background: linear-gradient(transparent 60%, var(--sm-accent, #FFE14D) 60%);
}
/* 02 ひとこと：グループ .sm-voice（中は段落） */
.sm-voice {
position: relative;
margin-left: 66px;
min-height: 52px;
padding: 12px 16px;
border: 2px solid #17212B;
border-radius: 4px 16px 16px 16px;
font-size: 16px;
line-height: 1.8;
}
.sm-voice::before,
.sm-voice::after {
content: "";
position: absolute;
top: -2px;
left: -68px;
width: 52px;
height: 52px;
}
.sm-voice::before { border-radius: 26px; background: #17212B; }
.sm-voice::after {
background-color: #FFFFFF;
-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19l-4 1z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E") center / 24px 24px 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19l-4 1z'/%3E%3Cpath d='M14 7l3 3'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.sm-voice > * { margin: 0; }
.sm-voice > * + * { margin-top: 8px; }
/* 03 きっかけ：グループ .sm-trigger（中は 段落 .sm-trigger__label と 段落 .sm-trigger__text） */
.sm-trigger {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 18px;
row-gap: 4px;
align-items: center;
padding: 20px 22px;
background: #F3F5F4;
line-height: 1.8;
}
.sm-trigger::before {
content: "?";
content: "?" / "";
grid-column: 1;
grid-row: 1 / span 2;
padding: 0 4px;
font-family: 'IBM Plex Mono', monospace;
font-size: 44px;
font-weight: 500;
line-height: 1;
background: linear-gradient(transparent 55%, var(--sm-accent, #FFE14D) 55%);
}
.sm-trigger > * { grid-column: 2; margin: 0; }
.sm-trigger__label { align-self: end; font-size: 12px; font-weight: 700; color: #55616D; }
.sm-trigger__text { align-self: start; font-size: 18px; font-weight: 700; line-height: 1.6; }
/* 04 分かったこと・分からなかったこと：グループ .sm-findings の中に
グループ .sm-findings__known と .sm-findings__unknown（中は 段落 .sm-findings__title とリスト） */
.sm-findings { display: flex; flex-wrap: wrap; gap: 16px; }
.sm-findings > * { margin: 0; }
.sm-findings__known,
.sm-findings__unknown {
flex: 1 1 200px;
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 18px;
font-size: 15px;
line-height: 1.8;
}
.sm-findings__known { border: 2px solid #17212B; }
.sm-findings__unknown { border: 2px dashed #8B959C; color: #3B4650; }
.sm-findings__known > *,
.sm-findings__unknown > * { margin: 0; }
.sm-findings__title { font-size: 15px; font-weight: 900; }
.sm-findings__known .sm-findings__title {
align-self: flex-start;
padding: 0 4px;
background: linear-gradient(transparent 60%, var(--sm-accent, #FFE14D) 60%);
}
.sm-findings__known ul,
.sm-findings__unknown ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sm-findings__known li,
.sm-findings__unknown li,
.sm-findings__known li + li,
.sm-findings__unknown li + li { margin: 0; }
/* 05 メモ（付箋）：グループ .sm-sticky（中は 段落 .sm-sticky__label「MEMO」と段落） */
.sm-sticky {
position: relative;
width: fit-content;
max-width: 464px; /* モックは content-box の 420px＋左右の余白 22px×2 */
box-sizing: border-box;
margin-top: 32px;
padding: 26px 22px 20px;
background: var(--sm-accent, #FFE14D);
color: #17212B;
box-shadow: 3px 4px 0 #DCE1E0;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
}
.sm-sticky::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 84px;
height: 20px;
margin-left: -42px;
background: #FFFFFF;
border: 1px solid #C9D0CF;
box-sizing: border-box;
opacity: 0.9;
}
.sm-sticky > * { margin: 0; }
.sm-sticky__label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.08em; }
/* 06 手順：番号付きリスト .sm-steps（各項目は「見出し
説明」） */
ol.sm-steps {
counter-reset: sm-step;
margin-left: 0;
margin-right: 0;
padding: 0;
list-style: none;
font-size: 15px;
line-height: 1.8;
color: #3B4650;
}
ol.sm-steps li {
position: relative;
min-height: 36px;
margin: 0;
padding: 0 0 18px 52px;
counter-increment: sm-step;
}
ol.sm-steps li + li { margin-top: 0; }
ol.sm-steps li:last-child { padding-bottom: 0; }
ol.sm-steps li::before {
content: counter(sm-step);
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 36px;
border-radius: 18px;
box-sizing: border-box;
background: #17212B;
color: #FFFFFF;
font-family: 'IBM Plex Mono', monospace;
font-size: 15px;
line-height: 36px;
text-align: center;
}
ol.sm-steps li:last-child::before {
background: var(--sm-accent, #FFE14D);
border: 2px solid #17212B;
color: #17212B;
line-height: 32px;
}
ol.sm-steps li::after {
content: "";
position: absolute;
top: 36px;
bottom: 0;
left: 17px;
width: 2px;
background: #17212B;
}
ol.sm-steps li:last-child::after { display: none; }
ol.sm-steps strong { color: #17212B; font-size: 16px; font-weight: 700; }
/* 07 チェックリスト：グループ .sm-checklist（中は 段落 .sm-checklist__title と、
スタイル「チェック済み」is-style-sm-check-done／「未チェック」is-style-sm-check-todo の段落） */
.sm-checklist {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 4px;
border-top: 2px solid #17212B;
border-bottom: 2px solid #17212B;
font-size: 16px;
line-height: 1.8;
}
.sm-checklist > * { margin: 0; }
.sm-checklist__title { font-size: 15px; font-weight: 900; }
.is-style-sm-check-done,
.is-style-sm-check-todo { position: relative; margin: 0; padding-left: 34px; font-size: 16px; line-height: 1.8; }
.is-style-sm-check-done::before,
.is-style-sm-check-todo::before {
position: absolute;
top: 4px;
left: 0;
width: 22px;
height: 22px;
border: 2px solid #17212B;
box-sizing: border-box;
background: #FFFFFF;
}
.is-style-sm-check-todo::before { content: ""; content: "" / "未"; }
.is-style-sm-check-done::before {
content: "";
content: "" / "済";
background: var(--sm-accent, #FFE14D) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317212B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
/* 08 注意：グループ .sm-caution（中は 段落 .sm-caution__label「注意」と段落） */
.sm-caution {
position: relative;
margin-top: 34px;
padding: 22px 20px 16px;
border: 2px solid #17212B;
font-size: 16px;
line-height: 1.8;
}
.sm-caution > * { margin: 0; }
.sm-caution > * + * { margin-top: 8px; }
.sm-caution > .sm-caution__label + * { margin-top: 0; }
.sm-caution__label {
position: absolute;
top: -14px;
left: 16px;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 2px 12px;
background: #17212B;
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
.sm-caution__label::before {
content: "";
flex: 0 0 14px;
width: 14px;
height: 14px;
background-color: currentColor;
-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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2L12 3z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 09 くらべる表：表のスタイル「くらべる表」is-style-sm-compare、目立たせる列は is-style-sm-compare-2〜5（左から数えた列） */
.wp-block-table[class*="is-style-sm-compare"] { overflow-x: auto; margin-left: 0; margin-right: 0; border: 0; }
.wp-block-table[class*="is-style-sm-compare"] table {
width: 100%;
min-width: 420px;
border: 0;
border-collapse: collapse;
font-size: 15px;
line-height: 1.8;
text-align: left;
}
.wp-block-table[class*="is-style-sm-compare"] thead { border-bottom: 0; }
.wp-block-table[class*="is-style-sm-compare"] tbody tr,
.wp-block-table[class*="is-style-sm-compare"] tbody tr:nth-child(even),
.wp-block-table[class*="is-style-sm-compare"] thead tr { background: transparent; color: #17212B; border-top: 0; }
.wp-block-table[class*="is-style-sm-compare"] th,
.wp-block-table[class*="is-style-sm-compare"] td { padding: 10px 12px; border: 0; text-align: left; vertical-align: top; }
.wp-block-table[class*="is-style-sm-compare"] thead th { border-bottom: 2px solid #17212B; font-weight: 700; }
.wp-block-table[class*="is-style-sm-compare"] tbody th { font-weight: 700; white-space: nowrap; }
.wp-block-table[class*="is-style-sm-compare"] tbody tr:not(:last-child) > * { border-bottom: 1px solid #DCE1E0; }
.wp-block-table.is-style-sm-compare-2 :is(th, td):nth-child(2),
.wp-block-table.is-style-sm-compare-3 :is(th, td):nth-child(3),
.wp-block-table.is-style-sm-compare-4 :is(th, td):nth-child(4),
.wp-block-table.is-style-sm-compare-5 :is(th, td):nth-child(5) { border-left: 2px solid #17212B; border-right: 2px solid #17212B; font-weight: 700; }
.wp-block-table.is-style-sm-compare-2 thead th:nth-child(2),
.wp-block-table.is-style-sm-compare-3 thead th:nth-child(3),
.wp-block-table.is-style-sm-compare-4 thead th:nth-child(4),
.wp-block-table.is-style-sm-compare-5 thead th:nth-child(5) { border-top: 2px solid #17212B; border-bottom: 0; background: var(--sm-accent, #FFE14D); color: #17212B; font-weight: 900; }
.wp-block-table.is-style-sm-compare-2 tbody tr:last-child > :nth-child(2),
.wp-block-table.is-style-sm-compare-3 tbody tr:last-child > :nth-child(3),
.wp-block-table.is-style-sm-compare-4 tbody tr:last-child > :nth-child(4),
.wp-block-table.is-style-sm-compare-5 tbody tr:last-child > :nth-child(5) { border-bottom: 2px solid #17212B; }
.wp-block-table[class*="is-style-sm-compare"] figcaption { margin-top: 8px; font-size: 13px; color: #55616D; }
/* 10 図とキャプション：画像 .sm-figure（キャプションの前に「図1」「図2」…を自動で付ける） */
.sm-entry,
.is-root-container { counter-reset: sm-figure; }
.wp-block-image.sm-figure { display: flex; flex-direction: column; gap: 10px; margin-left: 0; margin-right: 0; counter-increment: sm-figure; }
.wp-block-image.sm-figure img { display: block; width: 100%; height: auto; border: 2px solid #17212B; border-radius: 0; box-sizing: border-box; }
.wp-block-image.sm-figure figcaption {
display: flex;
gap: 10px;
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #3B4650;
text-align: left;
}
.wp-block-image.sm-figure figcaption::before {
content: "図" counter(sm-figure);
flex: 0 0 auto;
align-self: flex-start;
padding: 0 8px;
background: #17212B;
color: #FFFFFF;
font-family: 'IBM Plex Mono', 'Zen Kaku Gothic New', monospace;
}
/* 11 余談：グループ .sm-aside（中は 段落 .sm-aside__label「余談」と段落） */
.sm-aside {
position: relative;
padding: 14px 0 14px 64px;
border-top: 2px dotted #8B959C;
border-bottom: 2px dotted #8B959C;
font-size: 15px;
line-height: 1.8;
color: #3B4650;
}
.sm-aside > * { margin: 0; }
.sm-aside > * + * { margin-top: 6px; }
.sm-aside > .sm-aside__label + * { margin-top: 0; }
.sm-aside__label {
position: absolute;
top: 17px;
left: 0;
margin: 0;
padding: 0 10px;
border: 1px solid #17212B;
color: #17212B;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
/* 12 調べた先：グループ .sm-sources（中は 段落 .sm-sources__title と番号付きリスト） */
.sm-sources {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px;
background: #F3F5F4;
font-size: 14px;
line-height: 1.8;
}
.sm-sources > * { margin: 0; }
.sm-sources__title { font-size: 14px; font-weight: 900; }
.sm-sources ol {
counter-reset: sm-source;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.sm-sources ol li { display: flex; gap: 12px; margin: 0; counter-increment: sm-source; }
.sm-sources ol li::before { content: "[" counter(sm-source) "]"; flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace; color: #55616D; }
/* スマホ */
@media (max-width: 480px) {
.sm-voice { margin-left: 58px; }
.sm-voice::before,
.sm-voice::after { left: -60px; width: 46px; height: 46px; }
.sm-trigger { padding: 16px 18px; column-gap: 14px; }
.sm-trigger::before { font-size: 36px; }
.sm-sticky { max-width: 100%; }
}