/* =========================================================
色チップ（カラー系統の見本）
★BIOTOPE_DESIGN_SYSTEM.md §3「色チップ」の写し。直接編集しない。
値を変えるときは BIOTOPE を先に直し、使っている全サイトへ配り直す。
検査: node docs/tools/check-design-tokens.js（babycar-kun）
ColorID 1〜13 と Pattern（柄物）を丸いチップで描く。仕様は
babycar-kun/docs/COLOR_PATTERN_SPEC_v1.0.md
一覧の形（表のカラー行の行頭アイコン）:
色名
- data-color-id が無い（ColorID が 1〜13 でない）ときはチップを出さない（WordPress では SWELL の点のまま）
- data-pattern は "1"（柄物）か "0"。data-match="1" で太字（絞り込みに合う色）
選択の形（絞り込みのチェックボックス）:
- .visually-hidden は各サイトの style.css で定義する
使う色トークン（tokens.css）: --color-card / --color-text / --color-accent /
--color-focus-ring / --color-focus-bg
========================================================= */
:root {
--swatch-white: #FFFFFF; /* 1 ホワイト系 */
--swatch-black: #2B2B2B; /* 2 ブラック系 */
--swatch-gray: #9E9E9E; /* 3 グレー系 */
--swatch-red: #C62F2F; /* 4 レッド系 */
--swatch-blue: #2F6BB3; /* 5 ブルー系 */
--swatch-green: #3E8B4E; /* 6 グリーン系 */
--swatch-yellow: #E6C229; /* 7 イエロー系 */
--swatch-orange: #E8822A; /* 8 オレンジ系 */
--swatch-pink: #F1A5B6; /* 9 ピンク系 */
--swatch-purple: #7A4E9E; /* 10 パープル系 */
--swatch-beige: #D9C7A2; /* 11 ベージュ系 */
--swatch-brown: #8A5A2E; /* 12 ブラウン系 */
--swatch-multi: conic-gradient(var(--swatch-red), var(--swatch-yellow), var(--swatch-green), var(--swatch-blue), var(--swatch-purple), var(--swatch-red)); /* 13 マルチカラー */
--swatch-edge: rgba(20, 40, 3, 0.28); /* 白・ベージュを背景から見分ける縁 */
--swatch-hatch-on-dark: rgba(255, 255, 255, 0.72); /* 暗い色の上の斜線 */
--swatch-hatch-on-light: rgba(20, 40, 3, 0.55); /* 明るい色の上の斜線 */
}
/* 色ごとの塗り・斜線の色・チェックの色 */
[data-color-id] { --cchip-bg: transparent; --cchip-ink: var(--swatch-hatch-on-light); --cchip-check: var(--color-text); --cchip-hatch: none; }
[data-color-id="1"] { --cchip-bg: var(--swatch-white); }
[data-color-id="2"] { --cchip-bg: var(--swatch-black); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="3"] { --cchip-bg: var(--swatch-gray); }
[data-color-id="4"] { --cchip-bg: var(--swatch-red); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="5"] { --cchip-bg: var(--swatch-blue); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="6"] { --cchip-bg: var(--swatch-green); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="7"] { --cchip-bg: var(--swatch-yellow); }
[data-color-id="8"] { --cchip-bg: var(--swatch-orange); }
[data-color-id="9"] { --cchip-bg: var(--swatch-pink); }
[data-color-id="10"] { --cchip-bg: var(--swatch-purple); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="11"] { --cchip-bg: var(--swatch-beige); }
[data-color-id="12"] { --cchip-bg: var(--swatch-brown); --cchip-ink: var(--swatch-hatch-on-dark); --cchip-check: var(--color-card); }
[data-color-id="13"] { --cchip-bg: var(--swatch-multi); --cchip-check: var(--color-card); }
/* 柄物は45°の斜線。小さい文字でもつぶれないよう、線と周期に下限を付ける */
[data-color-id][data-pattern="1"] {
--cchip-hatch: repeating-linear-gradient(45deg, var(--cchip-ink) 0 max(0.09em, 1.5px), transparent max(0.09em, 1.5px) max(0.3em, 4px));
}
[data-color-id="13"][data-pattern="1"] { --cchip-hatch: none; } /* 虹色がすでに多色柄を表す */
/* 丸そのもの（選択の形と一覧の形で共通） */
.cchip,
.cchip-item[data-color-id]::before {
display: inline-block;
flex: none;
width: var(--cchip-size, 1em);
height: var(--cchip-size, 1em);
border-radius: 50%;
background: var(--cchip-hatch), var(--cchip-bg);
box-shadow: inset 0 0 0 1px var(--swatch-edge);
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* ---------- 一覧の形 ----------
WordPress（SWELL の .swl-inline-list[data-icon=dot]:before）でも同じ HTML で上書きできるよう、
SWELL が設定するプロパティをすべて、優先度 (0,3,1) の規則で打ち消す（SWELL は (0,2,1)）。
大きさ・形も (0,3,1) 側に置き、CSS の読み込み順に勝敗を頼らない（2026-09-25） */
.swl-inline-list.cchip-item[data-color-id] {
display: inline-flex;
align-items: flex-start;
gap: 0.4em;
padding: 2px 0;
line-height: 1.5;
position: relative;
}
.swl-inline-list.cchip-item[data-color-id]::before {
content: "";
display: inline-block;
flex: none;
width: var(--cchip-size, 1em);
height: var(--cchip-size, 1em);
border-radius: 50%;
position: static;
top: auto;
left: auto;
transform: none;
color: inherit;
font-family: inherit;
margin-top: 0.25em; /* 行の高さ 1.5em の1行目の中央。色名が2行になってもチップは1行目に置く */
background: var(--cchip-hatch), var(--cchip-bg);
}
.swl-inline-list.cchip-item[data-match="1"] { font-weight: 700; }
/* ---------- 選択の形 ---------- */
.cchoice {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-height: 72px; /* タップ領域 44px 以上（BIOTOPE §6.3） */
padding: 10px 4px 6px;
border-radius: 8px; /* --radius-md */
cursor: pointer;
text-align: center;
-webkit-tap-highlight-color: transparent;
}
.cchoice .cchip { --cchip-size: 28px; position: relative; transition: transform 150ms ease; }
.cchoice-label { font-size: 12px; line-height: 1.3; color: var(--color-text); word-break: keep-all; }
/* 選んだ印: 隙間2px＋アクセント色の輪、線で描いたチェック、太字の色名（色だけに頼らない） */
.cchoice input:checked + .cchip {
box-shadow: inset 0 0 0 1px var(--swatch-edge), 0 0 0 2px var(--color-card), 0 0 0 5px var(--color-accent);
}
.cchoice input:checked + .cchip::after {
content: "";
position: absolute;
left: 50%;
top: 46%;
width: 7px;
height: 13px;
border-right: 3px solid var(--cchip-check);
border-bottom: 3px solid var(--cchip-check);
transform: translate(-50%, -50%) rotate(45deg);
}
.cchoice input:checked ~ .cchoice-label { font-weight: 700; }
/* フォーカスはラベル全体に付ける（選んだ印の輪と見分けるため） */
.cchoice:has(input:focus-visible) { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.cchoice input:focus-visible + .cchip { outline: 3px solid var(--color-focus-ring); outline-offset: 4px; }
.cchoice:has(input:focus-visible) input:focus-visible + .cchip { outline: none; }
.cchoice:active .cchip { transform: scale(0.92); }
@media (hover: hover) {
.cchoice:hover { background: var(--color-focus-bg); }
}
/* Windows のハイコントラストモードでも色を残し、選んだ印は outline で示す */
@media (forced-colors: active) {
.cchip, .cchip-item[data-color-id]::before { forced-color-adjust: none; }
.cchoice input:checked + .cchip { outline: 3px solid Highlight; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) {
.cchoice .cchip { transition: none; }
.cchoice:active .cchip { transform: none; }
}