@charset "utf-8";
/* =========================================================
   コードブロック（Highlighting Code Block）の配色：白地・#2a2a2a の濃淡
   ・公開画面は header.php で main.css の後に、編集画面は functions.php の memo_hcb_editor_style() で読み込む
   ・色は main.css の :root の変数。編集画面には main.css が無いので、後ろに同じ色を書いている
   ・色は増やさず、濃さ（と太さ）だけでコードの種類を分ける

     --mfw-code-bg（1%）   … 背景（左の列の地 3% より薄くして、枠線で区切る）
     --mfw-line（10%）     … 枠線・言語名の帯・コピーボタン・選択したときの背景
     --mfw-c-faint（30%）  … 行番号
     45%・斜体            … コメント
     60%                  … 文字列・値・数字
     --mfw-c-body（75%）   … ふつうの文字・変数・記号
     --mfw-c-title（100%） … 関数・プロパティ・属性名
     100%・太さ 500       … キーワード・タグ・セレクタ・@ルール（DM Mono の 500。css/fonts.css）
   ========================================================= */

/* 背景と枠 */
.hcb_wrap pre.prism {
	background: var(--mfw-code-bg, #fdfdfd);
	border: 1px solid var(--mfw-line, #eaeaea); /* 罫線を細く */
	box-shadow: none; /* prism.css の内側の黒い影を消す */
}

/* ふつうの文字。prism.css の黒い影は消す */
.hcb_wrap code[class*="language-"],
.hcb_wrap pre[class*="language-"] {
	color: var(--mfw-c-body, #5f5f5f);
	text-shadow: none;
}

/* 言語名（右上の CSS / PHP）：枠と同じ色の帯に濃い文字 */
.hcb_wrap pre[data-lang]::before {
	color: var(--mfw-c-title, #2a2a2a); /* 濃い文字 */
	background: var(--mfw-line, #eaeaea); /* 枠と同じ色 */
	border-radius: 0 0 3px 3px; /* 上の枠に付いているので、下の角だけ丸く */
}

/* 選択したときの背景 */
.hcb_wrap pre[class*="language-"] ::selection,
.hcb_wrap pre[class*="language-"]::selection {
	background: var(--mfw-line, #eaeaea); /* 選択したときの背景：背景より一段濃く */
}

/* コメント：一番控えめに、斜体（45%） */
.hcb_wrap .token.comment,
.hcb_wrap .token.prolog,
.hcb_wrap .token.doctype,
.hcb_wrap .token.cdata {
	color: rgba(var(--mfw-ink, 42, 42, 42), 0.45);
	font-style: italic;
}

/* 一番目立たせるもの：キーワード・タグ・セレクタ・@ルール（100%・太さ 500） */
.hcb_wrap .token.keyword,
.hcb_wrap .token.tag,
.hcb_wrap .token.selector,
.hcb_wrap .token.atrule,
.hcb_wrap .token.important,
.hcb_wrap .language-markup .token.tag {
	color: var(--mfw-c-title, #2a2a2a);
	font-weight: 500;
}
/* HTML のタグは属性名・値・記号がタグの中に入れ子になっているので、太字はタグ名だけに */
.hcb_wrap .token.tag .token:not(.tag) {
	font-weight: 400;
}

/* 名前：関数・プロパティ・属性名・定数（100%・太さはふつう） */
.hcb_wrap .token.function,
.hcb_wrap .token.builtin,
.hcb_wrap .token.constant,
.hcb_wrap .token.symbol,
.hcb_wrap .token.property,
.hcb_wrap .token.attr-name,
.hcb_wrap .language-markup .token.attr-name {
	color: var(--mfw-c-title, #2a2a2a);
}

/* 変数・記号：ふつうの文字と同じ（75%） */
.hcb_wrap .token.variable,
.hcb_wrap .token.operator,
.hcb_wrap .token.punctuation,
.hcb_wrap .token.entity,
.hcb_wrap .token.inserted,
.hcb_wrap .token.deleted,
.hcb_wrap .language-markup .token.punctuation {
	color: var(--mfw-c-body, #5f5f5f);
	background: none; /* prism.css で operator などに付く背景を消す */
}

/* 文字列・値・数字：一段控えめに（60%） */
.hcb_wrap .token.string,
.hcb_wrap .token.char,
.hcb_wrap .token.attr-value,
.hcb_wrap .token.url,
.hcb_wrap .token.number,
.hcb_wrap .token.boolean,
.hcb_wrap .token.regex,
.hcb_wrap .language-css .token.string {
	color: rgba(var(--mfw-ink, 42, 42, 42), 0.6);
	background: none;
}
/* 記号は prism.css で半透明になっているので戻す */
.hcb_wrap .token.punctuation,
.hcb_wrap .token.namespace {
	opacity: 1;
}

/* ---------------------------------------------------------
   HCB 2.x 用（本番・ローカルとも Highlighting Code Block 2.2.1）
   2.x は色を CSS 変数（--hcb--bgc など）で持ち、
   背景・枠を「.hcb_wrap.hcb_wrap > pre」という強い指定で付けるので、上の指定だけでは効かない。
   → 変数を .hcb_wrap に上書きし、枠は同じくらい強い指定で付け直す
   --------------------------------------------------------- */
.hcb_wrap {
	--hcb--bgc: var(--mfw-code-bg, #fdfdfd);              /* 背景 */
	--hcb--c: var(--mfw-c-body, #5f5f5f);                /* ふつうの文字 */
	--hcb--tsh: none;                 /* 文字の影なし */
	--hcb--data-label--bgc: var(--mfw-line, #eaeaea);     /* 言語名の帯：枠と同じ色 */
	--hcb--data-label--c: var(--mfw-c-title, #2a2a2a);  /* 言語名の文字：濃い色 */
	--hcb--line-numbers--c: var(--mfw-c-faint, #bfbfbf); /* 行番号 */
}
.hcb_wrap.hcb_wrap.hcb_wrap > pre {
	border: 1px solid var(--mfw-line, #eaeaea);           /* 枠（2.x は枠なしが標準） */
}
/* 言語名：HCB の設定で「言語名を表示」が切れていても出す */
.hcb_wrap > pre[data-lang]::before {
	content: attr(data-lang);
}

/* ---------------------------------------------------------
   コピーボタン
   ・言語名の帯と同じ色の四角に、濃い色のコピーアイコン（Phosphor の ph-copy）
   ・HCB 標準のクリップボードの絵（SVG の背景画像）は使わない
   ・コピーしたら（.-done）チェックのアイコンに変わる。上に出る「Copied!」の文字は HCB 標準のまま
   ・.hcb_wrap を2つ重ねて、HCB の CSS より強くしている
   --------------------------------------------------------- */
.hcb_wrap.hcb_wrap .hcb-clipboard {
	color: var(--mfw-c-title, #2a2a2a);
	background-color: var(--mfw-line, #eaeaea); /* 帯と同じ */
	background-image: none;
	border: none;
	border-radius: 0 0 3px 3px; /* 言語名の帯と同じ：下の角だけ丸く */
	cursor: pointer;
	transition: opacity 0.2s;
}
.hcb_wrap.hcb_wrap .hcb-clipboard::after {
	content: "\e1ca"; /* ph-copy */
	font-family: "Phosphor MEMO"; /* css/phosphor.css のフォント */
	font-weight: normal; /* Phosphor は太さ 1種類だけ */
	font-size: 11px;
	line-height: 20px; /* ボタンの高さ（20px）の真ん中に */
	color: var(--mfw-c-title, #2a2a2a); /* 帯の文字と同じ */
}
.hcb_wrap.hcb_wrap .hcb-clipboard.-done {
	background-image: none;
}
.hcb_wrap.hcb_wrap .hcb-clipboard.-done::after {
	content: "\e182"; /* ph-check：コピーできた印 */
}
.hcb_wrap.hcb_wrap .hcb-clipboard:hover {
	opacity: 0.7;
}

/* ---------------------------------------------------------
   保存ボタン（js/single.js がコピーボタンの下に足す）
   ・コピーボタンと同じ形・色。コードブロックにマウスを乗せたとき・キーボードで選んだときに出る
   ・アイコンは Phosphor の ph-download-simple。保存したら ph-check
   ・コピーボタンの左には「Copied」の吹き出しが出るので、横ではなく下に置く
   --------------------------------------------------------- */
.hcb_wrap .memo-hcb-save {
	position: absolute;
	top: 62px;   /* ★ コピーボタン（上 28px・高さ 30px）の 4px 下 */
	right: 8px;  /* コピーボタンと同じ */
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var(--mfw-c-title, #2a2a2a);
	background: var(--mfw-line, #eaeaea); /* コピーボタン・言語名の帯と同じ */
	border: none;
	border-radius: 3px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s;
}
.hcb_wrap:hover .memo-hcb-save,
.hcb_wrap .memo-hcb-save:focus-visible {
	opacity: 1;
}
.hcb_wrap:hover .memo-hcb-save:hover {
	opacity: 0.7;
}
.hcb_wrap .memo-hcb-save::after {
	content: "\e20c"; /* ph-download-simple */
	font-family: "Phosphor MEMO"; /* css/phosphor.css のフォント */
	font-weight: normal;
	font-size: 11px;
	line-height: 30px;
}
.hcb_wrap .memo-hcb-save.is-done::after {
	content: "\e182"; /* ph-check：保存した印 */
}
@media (prefers-reduced-motion: reduce) {
	.hcb_wrap .memo-hcb-save {
		transition: none;
	}
}