/* =====================================================================
   ブロック「カラーチャート」（memorandum-colors.php の memo_colors_render()）
   ・No.01 の連番 → 64px の正方形（中に HEX）→ COPY ALL
   ・色は MEMORANDUM の配色（#1d1f28 見出し／#2b2d39 本文／#8a8f9d 補足／#ccccc8 マウスオン）
   ===================================================================== */

/* 連番：ページの中のカラーチャートを上から数える */
body {
  counter-reset: memo-colors;
}
.memo-colors {
  --memo-colors-size: 64px;   /* ★ 正方形の大きさ */
  --memo-colors-gap: 6px;     /* ★ 正方形どうしの間 */
  --memo-colors-icon: 12px;   /* ★ 下の1行のアイコン・ファビコンの大きさ */
  counter-increment: memo-colors;
  margin: 0 0 40px;
  font-family: 'Montserrat', sans-serif;
}

/* 番号を3桁にそろえる（1 → 001）。対応していない古いブラウザは CODE1 の形になる */
@counter-style memo-colors-code {
  system: extends decimal;
  pad: 3 "0";
}

/* 1行目：CODE001　追加名称　SOURCE ↗ */
.memo-colors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
}
.memo-colors__no::before {
  content: "CODE" counter(memo-colors, memo-colors-code);   /* ★ CODE001・CODE002 …（"CODE" を変えれば頭の文字が変わる） */
  color: #1d1f28;
  font-weight: 700;
}
.memo-colors__note {
  color: #2b2d39;
  font-weight: 500;
}

/* 出どころ（下の1行の右端）：🔗 REFERENCE [ファビコン] COLORDROP.IO ／ ORIGINAL ／ NONE */
.memo-colors__ref {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  color: #2b2d39;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}
.memo-colors__ref-label {
  margin-right: 3px;          /* REFERENCE 〜 中身 */
}
.memo-colors__ref-text,
.memo-colors__ref-link,
a.memo-colors__ref-link:link,
a.memo-colors__ref-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 5px;                   /* ファビコン 〜 ドメイン名 */
  border: 0;                  /* テーマがリンクに設定している下線を消す */
  color: #2b2d39;
  font-weight: 500;
  text-decoration: none;
  box-shadow: none;
}
a.memo-colors__ref-link:hover {
  color: #ccccc8;
}
.memo-colors__fav {
  flex: 0 0 auto;
  display: block;
  width: var(--memo-colors-icon);    /* アイコンと同じ大きさ */
  height: var(--memo-colors-icon);
  background: no-repeat center / cover;   /* 画像は PHP で style に入れている */
  border-radius: 2px;
}
/* ファビコンをグレーに（カラーのままにするときは、このまとまりをコメントアウト） */
.memo-colors__fav {
  filter: grayscale(1);
  opacity: .8;
}

/* 正方形の並び
   ・テーマの本文の指定（.content ul { padding-left } など）に負けないよう、.memo-colors ul.… で強めに指定する */
.memo-colors ul.memo-colors__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--memo-colors-gap);
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  text-indent: 0;
}
.memo-colors ul.memo-colors__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-indent: 0;
}
.memo-colors ul.memo-colors__list > li::before,
.memo-colors ul.memo-colors__list > li::marker {
  content: none;              /* テーマが li に付けている印を消す */
}

/* 正方形（中に HEX。押すとコピー） */
.memo-colors .memo-colors__chip {
  display: flex;
  align-items: flex-end;      /* HEX を下に（上下の中央にするときは center） */
  justify-content: center;
  width: var(--memo-colors-size);
  height: var(--memo-colors-size);
  margin: 0;
  padding: 0 0 8px;           /* 下の端から HEX までの余白 */
  border: 1px solid rgba(0, 0, 0, .08);   /* 白に近い色でも形が分かるように */
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform .15s;
}
.memo-colors__chip.is-light { color: #1d1f28; }
.memo-colors__chip.is-dark  { color: #ffffff; }
.memo-colors__chip:hover { transform: translateY(-2px); }
.memo-colors__chip:focus-visible {
  outline: 2px solid #1d1f28;
  outline-offset: 2px;
}

/* 下の1行：COPY ALL・PNG（テキストのボタン）・REFERENCE */
.memo-colors__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.memo-colors .memo-colors__all[hidden],
.memo-colors .memo-colors__png[hidden] {
  display: none;
}
/* アイコン（Font Awesome）とファビコンの大きさをそろえる */
.memo-colors__actions i {
  width: var(--memo-colors-icon);
  font-size: var(--memo-colors-icon);
  text-align: center;
  color: #8a8f9d;             /* アイコンの色（MEMORANDUM のアイコンと同じ） */
}
.memo-colors .memo-colors__all,
.memo-colors .memo-colors__png {
  display: inline-flex;
  align-items: center;
  gap: 5px;                   /* アイコン 〜 文字 */
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #2b2d39;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}
.memo-colors__all:hover,
.memo-colors__all:hover i,
.memo-colors__png:hover,
.memo-colors__png:hover i {
  color: #ccccc8;
}
.memo-colors__all:focus-visible,
.memo-colors__png:focus-visible {
  outline: 2px solid #1d1f28;
  outline-offset: 2px;
}

/* コピーしたときのお知らせ（front.js が作る） */
.memo-colors-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 9999;
  padding: 8px 16px;
  border-radius: 4px;
  background: #1d1f28;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
}
.memo-colors-toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .memo-colors__chip,
  .memo-colors-toast {
    transition: none;
  }
  .memo-colors__chip:hover {
    transform: none;
  }
}

/* ===== 編集画面だけで使う部分 ===== */
.memo-colors__tools {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px dashed #b5b9c6;
  font-family: inherit;
}
.memo-colors__tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 0 0 12px;
}
.memo-colors__tool-row .components-base-control {
  flex: 1 1 260px;
}
.memo-colors__tools .components-notice {
  margin: 0 0 12px;
}
.memo-colors__empty {
  margin: 0;
  color: #8a8f9d;
  font-size: 12px;
}