/* =========================================================================
   colorway.css — 配色プレビュー（共通）
   軸＝朱(--primary #C0392B) は固定。サブカラー(--accent) と下地トーンのみ切替。
   各ページCSSの脇役要素は var(--accent)/var(--accent-tint) を参照する。
   ========================================================================= */

/* 朱×金 確定 — サブカラー(--accent)は金で固定。配色プレビューは廃止。 */
:root{ --accent:#A87C24; --accent-tint:#E0C588; --light:#F6F3EA; --rule:#E8E2D2; }

/* テーマ：朱固定 × サブカラー。--light/--rule の下地トーンも微調整 */
html[data-theme="sumi"]   { --accent:#C0392B; --accent-tint:#E08A82; --light:#F5F5F0; --rule:#E5E5E0; }
html[data-theme="kin"]    { --accent:#A87C24; --accent-tint:#E0C588; --light:#F6F3EA; --rule:#E8E2D2; }
html[data-theme="ai"]     { --accent:#2C5E7E; --accent-tint:#9CC0D4; --light:#EFF3F5; --rule:#DEE4E8; }
html[data-theme="matsuba"]{ --accent:#4E7245; --accent-tint:#A8C39C; --light:#F0F4ED; --rule:#DFE6D9; }
html[data-theme="nezu"]   { --accent:#595959; --accent-tint:#ABABAB; --light:#F2F2F3; --rule:#E2E2E4; }

/* =========================================================================
   配色ドック
   ========================================================================= */
.cw-dock{position:fixed;right:20px;bottom:20px;z-index:1200;width:266px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid #e3e3de;box-shadow:0 14px 44px rgba(26,26,26,.16);
  padding:17px 18px 15px;font-family:'Noto Sans JP',sans-serif;
  transition:transform .45s cubic-bezier(0.16,1,0.3,1)}
.cw-dock.min{transform:translateY(calc(100% - 50px))}
.cw-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;gap:10px}
.cw-head .t{font-family:'Noto Serif JP',serif;font-size:13px;font-weight:700;letter-spacing:.12em;color:#1A1A1A}
.cw-head .sub{font-size:10px;letter-spacing:.12em;color:#888;margin-top:3px;font-weight:500}
.cw-head .tg{width:22px;height:22px;display:grid;place-items:center;color:#999;flex:none;transition:transform .4s cubic-bezier(0.16,1,0.3,1);font-size:11px}
.cw-dock.min .cw-head .tg{transform:rotate(180deg)}
.cw-active{font-family:'Noto Serif JP',serif;font-size:14px;font-weight:700;color:#1A1A1A;margin:14px 0 12px;letter-spacing:.06em}
.cw-active .x{color:#bbb;margin:0 6px;font-weight:400}
.cw-active .ac{color:var(--accent)}
.cw-active .en{font-family:'Noto Sans JP',sans-serif;font-size:9.5px;letter-spacing:.2em;color:#999;margin-left:7px;font-weight:600}
.cw-sws{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cw-sw{aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;padding:0;position:relative;outline:none;transition:transform .25s cubic-bezier(0.22,1,0.36,1)}
.cw-sw::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;opacity:0;transition:opacity .25s ease}
.cw-sw:hover{transform:scale(1.12)}
.cw-sw[aria-pressed="true"]{transform:scale(1.06)}
.cw-sw[aria-pressed="true"]::after{opacity:1}
.cw-note{font-size:10px;color:#888;line-height:1.7;margin-top:13px;border-top:1px solid #e8e8e3;padding-top:11px;letter-spacing:.02em}
.cw-note b{color:var(--accent);font-weight:700}

@media (max-width:560px){
  .cw-dock{right:12px;bottom:12px;width:calc(100vw - 24px);max-width:300px}
}
@media (prefers-reduced-motion: reduce){
  .cw-dock,.cw-sw,.cw-head .tg{transition:none}
}