/* ---------- 背景デザイン切り替え（CSS-onlyピッカー・背景のみ変更） ---------- */
  .bg-radio { display: none; }

  body:has(#bg-aurora:checked),
  .bg-swatch--aurora {
    background:
      radial-gradient(circle at 15% 25%, rgba(134,217,62,0.32), transparent 42%),
      radial-gradient(circle at 85% 15%, rgba(182,245,122,0.28), transparent 46%),
      radial-gradient(circle at 30% 85%, rgba(134,217,62,0.24), transparent 50%),
      radial-gradient(circle at 90% 85%, rgba(230,250,200,0.4), transparent 42%),
      var(--bg);
    background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, auto;
    animation: bgFloat 24s ease-in-out infinite;
  }
  @keyframes bgFloat {
    0%, 100% { background-position: 0% 0%, 100% 0%, 30% 100%, 100% 100%, 0 0; }
    50% { background-position: 100% 100%, 0% 100%, 60% 0%, 20% 20%, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    body:has(#bg-aurora:checked), .bg-swatch--aurora { animation: none; }
  }
  .bg-swatch--default { background: var(--bg); }
  body:has(#bg-cream:checked), .bg-swatch--cream { background: #fbf7f1; }
  /* ---------- 単色8種（原色4＋淡い色4） ---------- */
  body:has(#bg-solid-cherry:checked), .bg-swatch--solid-cherry { background: #e5383b; }
  body:has(#bg-solid-cobalt:checked), .bg-swatch--solid-cobalt { background: #1d4ed8; }
  body:has(#bg-solid-sun:checked), .bg-swatch--solid-sun { background: #f7b500; }
  body:has(#bg-solid-emerald:checked), .bg-swatch--solid-emerald { background: #0f9b6e; }
  body:has(#bg-solid-lavender:checked), .bg-swatch--solid-lavender { background: #e6e0f7; }
  body:has(#bg-solid-mint:checked), .bg-swatch--solid-mint { background: #dbf5e9; }
  body:has(#bg-solid-peach:checked), .bg-swatch--solid-peach { background: #fbe2d8; }
  body:has(#bg-solid-greige:checked), .bg-swatch--solid-greige { background: #e7e2d8; }
  body:has(#bg-solid-orange:checked), .bg-swatch--solid-orange { background: #e8720c; }
  body:has(#bg-solid-violet:checked), .bg-swatch--solid-violet { background: #7c3aed; }
  body:has(#bg-solid-pink:checked), .bg-swatch--solid-pink { background: #e8368f; }
  body:has(#bg-solid-teal:checked), .bg-swatch--solid-teal { background: #12b6c9; }
  body:has(#bg-solid-terracotta:checked), .bg-swatch--solid-terracotta { background: #c8623f; }
  body:has(#bg-solid-plum:checked), .bg-swatch--solid-plum { background: #6b2d5c; }
  body:has(#bg-solid-powderblue:checked), .bg-swatch--solid-powderblue { background: #dceefc; }
  body:has(#bg-solid-sage:checked), .bg-swatch--solid-sage { background: #e2ecdf; }
  body:has(#bg-solid-rose:checked), .bg-swatch--solid-rose { background: #f7e0e6; }
  body:has(#bg-solid-charcoal:checked), .bg-swatch--solid-charcoal { background: #2b2d33; }
  /* ---------- ハニカム柄（黄・緑） ---------- */
  body:has(#bg-honey-yellow:checked), .bg-swatch--honey-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(30deg, rgba(224, 168, 23, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(224, 168, 23, 0.4) 87.5%, rgba(224, 168, 23, 0.4)),
      linear-gradient(150deg, rgba(224, 168, 23, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(224, 168, 23, 0.4) 87.5%, rgba(224, 168, 23, 0.4)),
      linear-gradient(30deg, rgba(224, 168, 23, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(224, 168, 23, 0.4) 87.5%, rgba(224, 168, 23, 0.4)),
      linear-gradient(150deg, rgba(224, 168, 23, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(224, 168, 23, 0.4) 87.5%, rgba(224, 168, 23, 0.4)),
      linear-gradient(60deg, rgba(243, 213, 118, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(243, 213, 118, 0.45) 75%, rgba(243, 213, 118, 0.45)),
      linear-gradient(60deg, rgba(243, 213, 118, 0.45) 25%, transparent 25.5%, transparent 75%, rgba(243, 213, 118, 0.45) 75%, rgba(243, 213, 118, 0.45));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-green:checked), .bg-swatch--honey-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(30deg, rgba(111, 174, 47, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(111, 174, 47, 0.4) 87.5%, rgba(111, 174, 47, 0.4)),
      linear-gradient(150deg, rgba(111, 174, 47, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(111, 174, 47, 0.4) 87.5%, rgba(111, 174, 47, 0.4)),
      linear-gradient(30deg, rgba(111, 174, 47, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(111, 174, 47, 0.4) 87.5%, rgba(111, 174, 47, 0.4)),
      linear-gradient(150deg, rgba(111, 174, 47, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(111, 174, 47, 0.4) 87.5%, rgba(111, 174, 47, 0.4)),
      linear-gradient(60deg, rgba(159, 216, 108, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(159, 216, 108, 0.4) 75%, rgba(159, 216, 108, 0.4)),
      linear-gradient(60deg, rgba(159, 216, 108, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(159, 216, 108, 0.4) 75%, rgba(159, 216, 108, 0.4));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-red:checked), .bg-swatch--honey-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(30deg, rgba(229, 56, 59, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(229, 56, 59, 0.4) 87.5%, rgba(229, 56, 59, 0.4)),
      linear-gradient(150deg, rgba(229, 56, 59, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(229, 56, 59, 0.4) 87.5%, rgba(229, 56, 59, 0.4)),
      linear-gradient(30deg, rgba(229, 56, 59, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(229, 56, 59, 0.4) 87.5%, rgba(229, 56, 59, 0.4)),
      linear-gradient(150deg, rgba(229, 56, 59, 0.4) 12%, transparent 12.5%, transparent 87%, rgba(229, 56, 59, 0.4) 87.5%, rgba(229, 56, 59, 0.4)),
      linear-gradient(60deg, rgba(242, 137, 139, 0.42) 25%, transparent 25.5%, transparent 75%, rgba(242, 137, 139, 0.42) 75%, rgba(242, 137, 139, 0.42)),
      linear-gradient(60deg, rgba(242, 137, 139, 0.42) 25%, transparent 25.5%, transparent 75%, rgba(242, 137, 139, 0.42) 75%, rgba(242, 137, 139, 0.42));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-blue:checked), .bg-swatch--honey-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(30deg, rgba(29, 78, 216, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(29, 78, 216, 0.35) 87.5%, rgba(29, 78, 216, 0.35)),
      linear-gradient(150deg, rgba(29, 78, 216, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(29, 78, 216, 0.35) 87.5%, rgba(29, 78, 216, 0.35)),
      linear-gradient(30deg, rgba(29, 78, 216, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(29, 78, 216, 0.35) 87.5%, rgba(29, 78, 216, 0.35)),
      linear-gradient(150deg, rgba(29, 78, 216, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(29, 78, 216, 0.35) 87.5%, rgba(29, 78, 216, 0.35)),
      linear-gradient(60deg, rgba(147, 180, 245, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(147, 180, 245, 0.4) 75%, rgba(147, 180, 245, 0.4)),
      linear-gradient(60deg, rgba(147, 180, 245, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(147, 180, 245, 0.4) 75%, rgba(147, 180, 245, 0.4));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-orange:checked), .bg-swatch--honey-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(30deg, rgba(232, 114, 12, 0.38) 12%, transparent 12.5%, transparent 87%, rgba(232, 114, 12, 0.38) 87.5%, rgba(232, 114, 12, 0.38)),
      linear-gradient(150deg, rgba(232, 114, 12, 0.38) 12%, transparent 12.5%, transparent 87%, rgba(232, 114, 12, 0.38) 87.5%, rgba(232, 114, 12, 0.38)),
      linear-gradient(30deg, rgba(232, 114, 12, 0.38) 12%, transparent 12.5%, transparent 87%, rgba(232, 114, 12, 0.38) 87.5%, rgba(232, 114, 12, 0.38)),
      linear-gradient(150deg, rgba(232, 114, 12, 0.38) 12%, transparent 12.5%, transparent 87%, rgba(232, 114, 12, 0.38) 87.5%, rgba(232, 114, 12, 0.38)),
      linear-gradient(60deg, rgba(249, 189, 138, 0.42) 25%, transparent 25.5%, transparent 75%, rgba(249, 189, 138, 0.42) 75%, rgba(249, 189, 138, 0.42)),
      linear-gradient(60deg, rgba(249, 189, 138, 0.42) 25%, transparent 25.5%, transparent 75%, rgba(249, 189, 138, 0.42) 75%, rgba(249, 189, 138, 0.42));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-purple:checked), .bg-swatch--honey-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(30deg, rgba(124, 58, 237, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(124, 58, 237, 0.35) 87.5%, rgba(124, 58, 237, 0.35)),
      linear-gradient(150deg, rgba(124, 58, 237, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(124, 58, 237, 0.35) 87.5%, rgba(124, 58, 237, 0.35)),
      linear-gradient(30deg, rgba(124, 58, 237, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(124, 58, 237, 0.35) 87.5%, rgba(124, 58, 237, 0.35)),
      linear-gradient(150deg, rgba(124, 58, 237, 0.35) 12%, transparent 12.5%, transparent 87%, rgba(124, 58, 237, 0.35) 87.5%, rgba(124, 58, 237, 0.35)),
      linear-gradient(60deg, rgba(201, 168, 245, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(201, 168, 245, 0.4) 75%, rgba(201, 168, 245, 0.4)),
      linear-gradient(60deg, rgba(201, 168, 245, 0.4) 25%, transparent 25.5%, transparent 75%, rgba(201, 168, 245, 0.4) 75%, rgba(201, 168, 245, 0.4));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honey-mono:checked), .bg-swatch--honey-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(30deg, rgba(107, 114, 128, 0.32) 12%, transparent 12.5%, transparent 87%, rgba(107, 114, 128, 0.32) 87.5%, rgba(107, 114, 128, 0.32)),
      linear-gradient(150deg, rgba(107, 114, 128, 0.32) 12%, transparent 12.5%, transparent 87%, rgba(107, 114, 128, 0.32) 87.5%, rgba(107, 114, 128, 0.32)),
      linear-gradient(30deg, rgba(107, 114, 128, 0.32) 12%, transparent 12.5%, transparent 87%, rgba(107, 114, 128, 0.32) 87.5%, rgba(107, 114, 128, 0.32)),
      linear-gradient(150deg, rgba(107, 114, 128, 0.32) 12%, transparent 12.5%, transparent 87%, rgba(107, 114, 128, 0.32) 87.5%, rgba(107, 114, 128, 0.32)),
      linear-gradient(60deg, rgba(195, 199, 206, 0.38) 25%, transparent 25.5%, transparent 75%, rgba(195, 199, 206, 0.38) 75%, rgba(195, 199, 206, 0.38)),
      linear-gradient(60deg, rgba(195, 199, 206, 0.38) 25%, transparent 25.5%, transparent 75%, rgba(195, 199, 206, 0.38) 75%, rgba(195, 199, 206, 0.38));
    background-size: 44px 76px;
    background-position: 0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  }
  body:has(#bg-honeycomb:checked), .bg-swatch--honeycomb {
    background-color: #6fae2f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%2389c94f' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-yellow:checked), .bg-swatch--honeycomb-yellow {
    background-color: #f2b705;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23fbe28a' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-red:checked), .bg-swatch--honeycomb-red {
    background-color: #d92b2b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23f5a3a3' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-blue:checked), .bg-swatch--honeycomb-blue {
    background-color: #2255d1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23a8c2f5' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-orange:checked), .bg-swatch--honeycomb-orange {
    background-color: #e8720c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23f7bd85' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-purple:checked), .bg-swatch--honeycomb-purple {
    background-color: #7c3aed;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23d3b8fa' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-black:checked), .bg-swatch--honeycomb-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-white:checked), .bg-swatch--honeycomb-white {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-navygold:checked), .bg-swatch--honeycomb-navygold {
    background-color: #0f172a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-mono:checked), .bg-swatch--honeycomb-mono {
    background-color: #55595f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cg fill='none' stroke='%23b8bcc2' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }
  body:has(#bg-honeycomb-gradient:checked), .bg-swatch--honeycomb-gradient {
    background-color: #12141c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='79.67'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2386d93e'/%3E%3Cstop offset='50%25' stop-color='%2312b6c9'/%3E%3Cstop offset='100%25' stop-color='%238b3ce0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2.5'%3E%3Cpolygon points='92.00,39.84 69.00,79.67 23.00,79.67 0.00,39.84 23.00,0.00 69.00,0.00'/%3E%3Cpolygon points='161.00,0.00 138.00,39.84 92.00,39.84 69.00,0.00 92.00,-39.84 138.00,-39.84'/%3E%3Cpolygon points='161.00,79.67 138.00,119.51 92.00,119.51 69.00,79.67 92.00,39.84 138.00,39.84'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 138px 79.67px;
  }

  /* ---------- グラデーション5種（1つはスクショで翻訳のAuroraカラー） ---------- */
  body:has(#bg-grad-app:checked), .bg-swatch--grad-app {
    background: linear-gradient(160deg, #3EECAC 0%, #12B6C9 26%, #3B6FE0 55%, #8B3CE0 80%, #C86DD7 100%);
  }
  body:has(#bg-grad-sunset:checked), .bg-swatch--grad-sunset {
    background: linear-gradient(160deg, #FF9A44 0%, #FC6076 30%, #DA4FC4 60%, #8B3CE0 85%, #4A2F9E 100%);
  }
  body:has(#bg-grad-sky:checked), .bg-swatch--grad-sky {
    background: linear-gradient(160deg, #03045E 0%, #0077B6 30%, #00B4D8 58%, #90E0EF 82%, #CAF0F8 100%);
  }
  body:has(#bg-grad-candy:checked), .bg-swatch--grad-candy {
    background: linear-gradient(160deg, #F857A6 0%, #B24FD9 26%, #5A7BF0 52%, #20B6E8 78%, #4FE0C0 100%);
  }
  body:has(#bg-grad-gold:checked), .bg-swatch--grad-gold {
    background: linear-gradient(160deg, #7A1F00 0%, #E8590C 28%, #FF922B 56%, #FFC078 80%, #FFE8CC 100%);
  }
  body:has(#bg-grad-lagoon:checked), .bg-swatch--grad-lagoon {
    background: linear-gradient(160deg, #0F766E 0%, #0891B2 30%, #38BDF8 60%, #A5F3FC 100%);
  }
  body:has(#bg-grad-mauve:checked), .bg-swatch--grad-mauve {
    background: linear-gradient(160deg, #4C1D95 0%, #7C3AED 30%, #C026D3 60%, #F0ABFC 100%);
  }
  body:has(#bg-grad-citrus:checked), .bg-swatch--grad-citrus {
    background: linear-gradient(160deg, #65A30D 0%, #CA8A04 40%, #EA580C 70%, #FDE047 100%);
  }
  body:has(#bg-grad-midnight:checked), .bg-swatch--grad-midnight {
    background: linear-gradient(160deg, #020617 0%, #1E293B 35%, #4338CA 70%, #818CF8 100%);
  }
  body:has(#bg-grad-rosegold:checked), .bg-swatch--grad-rosegold {
    background: linear-gradient(160deg, #9F1239 0%, #E11D48 30%, #FB7185 55%, #FBBF24 80%, #FDE68A 100%);
  }

  /* ---------- グラデーション（くすみ系・落ち着いた系）10種 ---------- */
  body:has(#bg-grad-muted-rose:checked), .bg-swatch--grad-muted-rose {
    background: linear-gradient(160deg, #D9A9A0 0%, #C98D96 25%, #B87A8A 50%, #9A6478 75%, #7D4F66 100%);
  }
  body:has(#bg-grad-muted-sage:checked), .bg-swatch--grad-muted-sage {
    background: linear-gradient(160deg, #B8C4B0 0%, #9BAB8F 25%, #8BA888 50%, #7A9678 75%, #647D63 100%);
  }
  body:has(#bg-grad-muted-slate:checked), .bg-swatch--grad-muted-slate {
    background: linear-gradient(160deg, #A8B4C4 0%, #8FA0B8 25%, #6B87A8 50%, #5A7290 75%, #4A5C73 100%);
  }
  body:has(#bg-grad-muted-mustard:checked), .bg-swatch--grad-muted-mustard {
    background: linear-gradient(160deg, #D4B876 0%, #C9A84C 25%, #B8943F 50%, #A17F35 75%, #856A2D 100%);
  }
  body:has(#bg-grad-muted-mauve:checked), .bg-swatch--grad-muted-mauve {
    background: linear-gradient(160deg, #C4B0C9 0%, #AB8FB0 25%, #9A86A8 50%, #82708F 75%, #6A5C73 100%);
  }
  body:has(#bg-grad-muted-terracotta:checked), .bg-swatch--grad-muted-terracotta {
    background: linear-gradient(160deg, #D4A583 0%, #C68A5A 25%, #B8794A 50%, #A1673D 75%, #855530 100%);
  }
  body:has(#bg-grad-muted-greige:checked), .bg-swatch--grad-muted-greige {
    background: linear-gradient(160deg, #C9C3BA 0%, #B8B0A5 25%, #A8A29A 50%, #918B82 75%, #757067 100%);
  }
  body:has(#bg-grad-muted-bloom:checked), .bg-swatch--grad-muted-bloom {
    background: linear-gradient(160deg, #C9A8B8 0%, #B88EA3 25%, #A8768F 50%, #906078 75%, #744C60 100%);
  }
  body:has(#bg-grad-muted-moss:checked), .bg-swatch--grad-muted-moss {
    background: linear-gradient(160deg, #A8B895 0%, #93A67D 25%, #7D9268 50%, #6A7D56 75%, #566647 100%);
  }
  body:has(#bg-grad-muted-navy:checked), .bg-swatch--grad-muted-navy {
    background: linear-gradient(160deg, #6B7A8F 0%, #556478 25%, #414F61 50%, #303C4C 75%, #212A37 100%);
  }

  /* ---------- パターン系10種 ---------- */
  body:has(#bg-pat-terrazzo:checked), .bg-swatch--pat-terrazzo {
    background-color: #fbfbf9;
    background-image:
      radial-gradient(circle at 10% 20%, #e8a33d 0, #e8a33d 6px, transparent 7px),
      radial-gradient(circle at 25% 65%, #6fae2f 0, #6fae2f 5px, transparent 6px),
      radial-gradient(circle at 45% 15%, #3b6fe0 0, #3b6fe0 4px, transparent 5px),
      radial-gradient(circle at 60% 55%, #da4fc4 0, #da4fc4 5px, transparent 6px),
      radial-gradient(circle at 80% 25%, #e85d5d 0, #e85d5d 4px, transparent 5px),
      radial-gradient(circle at 15% 85%, #12b6c9 0, #12b6c9 6px, transparent 7px),
      radial-gradient(circle at 90% 70%, #f0c419 0, #f0c419 5px, transparent 6px),
      radial-gradient(circle at 35% 40%, #8b3ce0 0, #8b3ce0 4px, transparent 5px),
      radial-gradient(circle at 70% 90%, #6fae2f 0, #6fae2f 5px, transparent 6px),
      radial-gradient(circle at 55% 75%, #e8a33d 0, #e8a33d 4px, transparent 5px);
    background-size: 220px 220px;
  }
  body:has(#bg-pat-concrete:checked), .bg-swatch--pat-concrete {
    background-color: #c9c7c1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.15 0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }
  body:has(#bg-pat-shimmer:checked), .bg-swatch--pat-shimmer {
    background-color: #eef1f5;
    background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.9) 45%, rgba(134,217,62,0.35) 50%, rgba(255,255,255,0.9) 55%, transparent 70%);
    background-size: 300% 300%;
    animation: bgShimmer 6s ease-in-out infinite;
  }
  @keyframes bgShimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    body:has(#bg-pat-shimmer:checked), .bg-swatch--pat-shimmer { animation: none; }
  }
  body:has(#bg-pat-ripple:checked), .bg-swatch--pat-ripple {
    background-color: #eaf6fb;
    background-image:
      repeating-radial-gradient(circle at 20% 30%, rgba(18,182,201,0.22) 0, rgba(18,182,201,0.22) 2px, transparent 3px, transparent 26px),
      repeating-radial-gradient(circle at 75% 70%, rgba(59,111,224,0.16) 0, rgba(59,111,224,0.16) 2px, transparent 3px, transparent 30px);
    background-size: 160% 160%, 180% 180%;
    animation: bgRipple 14s ease-in-out infinite;
  }
  @keyframes bgRipple {
    0%, 100% { background-position: 0% 0%, 100% 100%; }
    50% { background-position: 40% 60%, 60% 20%; }
  }
  @media (prefers-reduced-motion: reduce) {
    body:has(#bg-pat-ripple:checked), .bg-swatch--pat-ripple { animation: none; }
  }

  /* ---------- ドット（10色） ---------- */
  body:has(#bg-dots-green:checked), .bg-swatch--dots-green {
    background-color: #f6faf1;
    background-image: radial-gradient(circle, rgba(111, 174, 47, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-yellow:checked), .bg-swatch--dots-yellow {
    background-color: #fffbf0;
    background-image: radial-gradient(circle, rgba(242, 183, 5, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-red:checked), .bg-swatch--dots-red {
    background-color: #fff5f5;
    background-image: radial-gradient(circle, rgba(229, 56, 59, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-blue:checked), .bg-swatch--dots-blue {
    background-color: #f0f5ff;
    background-image: radial-gradient(circle, rgba(34, 85, 209, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-orange:checked), .bg-swatch--dots-orange {
    background-color: #fff4ec;
    background-image: radial-gradient(circle, rgba(232, 114, 12, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-purple:checked), .bg-swatch--dots-purple {
    background-color: #f7f0fc;
    background-image: radial-gradient(circle, rgba(124, 58, 237, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-pink:checked), .bg-swatch--dots-pink {
    background-color: #fdf0f7;
    background-image: radial-gradient(circle, rgba(232, 54, 143, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-teal:checked), .bg-swatch--dots-teal {
    background-color: #eafbfd;
    background-image: radial-gradient(circle, rgba(18, 182, 201, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-mono:checked), .bg-swatch--dots-mono {
    background-color: #f5f5f4;
    background-image: radial-gradient(circle, rgba(107, 114, 128, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }
  body:has(#bg-dots-black:checked), .bg-swatch--dots-black {
    background-color: #fafafa;
    background-image: radial-gradient(circle, rgba(20, 22, 26, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  /* ---------- ストライプ（10色） ---------- */
  body:has(#bg-stripe-green:checked), .bg-swatch--stripe-green {
    background-color: #f6faf1;
    background-image: repeating-linear-gradient(45deg, rgba(111, 174, 47, 0.18) 0px, rgba(111, 174, 47, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-yellow:checked), .bg-swatch--stripe-yellow {
    background-color: #fffbf0;
    background-image: repeating-linear-gradient(45deg, rgba(242, 183, 5, 0.18) 0px, rgba(242, 183, 5, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-red:checked), .bg-swatch--stripe-red {
    background-color: #fff5f5;
    background-image: repeating-linear-gradient(45deg, rgba(229, 56, 59, 0.18) 0px, rgba(229, 56, 59, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-blue:checked), .bg-swatch--stripe-blue {
    background-color: #f0f5ff;
    background-image: repeating-linear-gradient(45deg, rgba(34, 85, 209, 0.18) 0px, rgba(34, 85, 209, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-orange:checked), .bg-swatch--stripe-orange {
    background-color: #fff4ec;
    background-image: repeating-linear-gradient(45deg, rgba(232, 114, 12, 0.18) 0px, rgba(232, 114, 12, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-purple:checked), .bg-swatch--stripe-purple {
    background-color: #f7f0fc;
    background-image: repeating-linear-gradient(45deg, rgba(124, 58, 237, 0.18) 0px, rgba(124, 58, 237, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-pink:checked), .bg-swatch--stripe-pink {
    background-color: #fdf0f7;
    background-image: repeating-linear-gradient(45deg, rgba(232, 54, 143, 0.18) 0px, rgba(232, 54, 143, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-teal:checked), .bg-swatch--stripe-teal {
    background-color: #eafbfd;
    background-image: repeating-linear-gradient(45deg, rgba(18, 182, 201, 0.18) 0px, rgba(18, 182, 201, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-mono:checked), .bg-swatch--stripe-mono {
    background-color: #f5f5f4;
    background-image: repeating-linear-gradient(45deg, rgba(107, 114, 128, 0.18) 0px, rgba(107, 114, 128, 0.18) 10px, transparent 10px, transparent 24px);
  }
  body:has(#bg-stripe-black:checked), .bg-swatch--stripe-black {
    background-color: #fafafa;
    background-image: repeating-linear-gradient(45deg, rgba(20, 22, 26, 0.18) 0px, rgba(20, 22, 26, 0.18) 10px, transparent 10px, transparent 24px);
  }

  /* ---------- グラフ用紙（10色） ---------- */
  body:has(#bg-graph-green:checked), .bg-swatch--graph-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(rgba(111, 174, 47, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(111, 174, 47, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-yellow:checked), .bg-swatch--graph-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(rgba(242, 183, 5, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242, 183, 5, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-red:checked), .bg-swatch--graph-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(rgba(229, 56, 59, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(229, 56, 59, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-blue:checked), .bg-swatch--graph-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(rgba(34, 85, 209, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(34, 85, 209, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-orange:checked), .bg-swatch--graph-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(rgba(232, 114, 12, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 114, 12, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-purple:checked), .bg-swatch--graph-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(rgba(124, 58, 237, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(124, 58, 237, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-pink:checked), .bg-swatch--graph-pink {
    background-color: #fdf0f7;
    background-image:
      linear-gradient(rgba(232, 54, 143, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(232, 54, 143, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-teal:checked), .bg-swatch--graph-teal {
    background-color: #eafbfd;
    background-image:
      linear-gradient(rgba(18, 182, 201, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(18, 182, 201, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-mono:checked), .bg-swatch--graph-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(rgba(107, 114, 128, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107, 114, 128, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  body:has(#bg-graph-black:checked), .bg-swatch--graph-black {
    background-color: #fafafa;
    background-image:
      linear-gradient(rgba(20, 22, 26, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(20, 22, 26, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* ---------- バブル（10色） ---------- */
  body:has(#bg-bubbles-green:checked), .bg-swatch--bubbles-green {
    background-color: #f6faf1;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(111, 174, 47, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(111, 174, 47, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(111, 174, 47, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(111, 174, 47, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(111, 174, 47, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(111, 174, 47, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-yellow:checked), .bg-swatch--bubbles-yellow {
    background-color: #fffbf0;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(242, 183, 5, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(242, 183, 5, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(242, 183, 5, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(242, 183, 5, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(242, 183, 5, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(242, 183, 5, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-red:checked), .bg-swatch--bubbles-red {
    background-color: #fff5f5;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(229, 56, 59, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(229, 56, 59, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(229, 56, 59, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(229, 56, 59, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(229, 56, 59, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(229, 56, 59, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-blue:checked), .bg-swatch--bubbles-blue {
    background-color: #f0f5ff;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(34, 85, 209, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(34, 85, 209, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(34, 85, 209, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(34, 85, 209, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(34, 85, 209, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(34, 85, 209, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-orange:checked), .bg-swatch--bubbles-orange {
    background-color: #fff4ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(232, 114, 12, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(232, 114, 12, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(232, 114, 12, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(232, 114, 12, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(232, 114, 12, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(232, 114, 12, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-purple:checked), .bg-swatch--bubbles-purple {
    background-color: #f7f0fc;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(124, 58, 237, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(124, 58, 237, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(124, 58, 237, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(124, 58, 237, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(124, 58, 237, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(124, 58, 237, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-pink:checked), .bg-swatch--bubbles-pink {
    background-color: #fdf0f7;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(232, 54, 143, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(232, 54, 143, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(232, 54, 143, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(232, 54, 143, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(232, 54, 143, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(232, 54, 143, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-teal:checked), .bg-swatch--bubbles-teal {
    background-color: #eafbfd;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(18, 182, 201, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(18, 182, 201, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(18, 182, 201, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(18, 182, 201, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(18, 182, 201, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(18, 182, 201, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-mono:checked), .bg-swatch--bubbles-mono {
    background-color: #f5f5f4;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(107, 114, 128, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(107, 114, 128, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(107, 114, 128, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(107, 114, 128, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(107, 114, 128, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(107, 114, 128, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }
  body:has(#bg-bubbles-black:checked), .bg-swatch--bubbles-black {
    background-color: #fafafa;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(20, 22, 26, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(20, 22, 26, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(20, 22, 26, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(20, 22, 26, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(20, 22, 26, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(20, 22, 26, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  /* ---------- アーガイル（10色） ---------- */
  body:has(#bg-argyle-green:checked), .bg-swatch--argyle-green {
    background-color: #f6faf1;
    background-image:
      repeating-linear-gradient(45deg, rgba(111, 174, 47, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(111, 174, 47, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-yellow:checked), .bg-swatch--argyle-yellow {
    background-color: #fffbf0;
    background-image:
      repeating-linear-gradient(45deg, rgba(242, 183, 5, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(242, 183, 5, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-red:checked), .bg-swatch--argyle-red {
    background-color: #fff5f5;
    background-image:
      repeating-linear-gradient(45deg, rgba(229, 56, 59, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(229, 56, 59, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-blue:checked), .bg-swatch--argyle-blue {
    background-color: #f0f5ff;
    background-image:
      repeating-linear-gradient(45deg, rgba(34, 85, 209, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(34, 85, 209, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-orange:checked), .bg-swatch--argyle-orange {
    background-color: #fff4ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(232, 114, 12, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(232, 114, 12, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-purple:checked), .bg-swatch--argyle-purple {
    background-color: #f7f0fc;
    background-image:
      repeating-linear-gradient(45deg, rgba(124, 58, 237, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(124, 58, 237, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-pink:checked), .bg-swatch--argyle-pink {
    background-color: #fdf0f7;
    background-image:
      repeating-linear-gradient(45deg, rgba(232, 54, 143, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(232, 54, 143, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-teal:checked), .bg-swatch--argyle-teal {
    background-color: #eafbfd;
    background-image:
      repeating-linear-gradient(45deg, rgba(18, 182, 201, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(18, 182, 201, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-mono:checked), .bg-swatch--argyle-mono {
    background-color: #f5f5f4;
    background-image:
      repeating-linear-gradient(45deg, rgba(107, 114, 128, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(107, 114, 128, 0.2) 0 2px, transparent 2px 40px);
  }
  body:has(#bg-argyle-black:checked), .bg-swatch--argyle-black {
    background-color: #fafafa;
    background-image:
      repeating-linear-gradient(45deg, rgba(20, 22, 26, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(20, 22, 26, 0.2) 0 2px, transparent 2px 40px);
  }

  /* ---------- チェッカー（10色） ---------- */
  body:has(#bg-checker-green:checked), .bg-swatch--checker-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(45deg, rgba(111, 174, 47, 0.14) 25%, transparent 25%, transparent 75%, rgba(111, 174, 47, 0.14) 75%),
      linear-gradient(45deg, rgba(111, 174, 47, 0.14) 25%, transparent 25%, transparent 75%, rgba(111, 174, 47, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-yellow:checked), .bg-swatch--checker-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(45deg, rgba(242, 183, 5, 0.14) 25%, transparent 25%, transparent 75%, rgba(242, 183, 5, 0.14) 75%),
      linear-gradient(45deg, rgba(242, 183, 5, 0.14) 25%, transparent 25%, transparent 75%, rgba(242, 183, 5, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-red:checked), .bg-swatch--checker-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(45deg, rgba(229, 56, 59, 0.14) 25%, transparent 25%, transparent 75%, rgba(229, 56, 59, 0.14) 75%),
      linear-gradient(45deg, rgba(229, 56, 59, 0.14) 25%, transparent 25%, transparent 75%, rgba(229, 56, 59, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-blue:checked), .bg-swatch--checker-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(45deg, rgba(34, 85, 209, 0.14) 25%, transparent 25%, transparent 75%, rgba(34, 85, 209, 0.14) 75%),
      linear-gradient(45deg, rgba(34, 85, 209, 0.14) 25%, transparent 25%, transparent 75%, rgba(34, 85, 209, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-orange:checked), .bg-swatch--checker-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(45deg, rgba(232, 114, 12, 0.14) 25%, transparent 25%, transparent 75%, rgba(232, 114, 12, 0.14) 75%),
      linear-gradient(45deg, rgba(232, 114, 12, 0.14) 25%, transparent 25%, transparent 75%, rgba(232, 114, 12, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-purple:checked), .bg-swatch--checker-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(45deg, rgba(124, 58, 237, 0.14) 25%, transparent 25%, transparent 75%, rgba(124, 58, 237, 0.14) 75%),
      linear-gradient(45deg, rgba(124, 58, 237, 0.14) 25%, transparent 25%, transparent 75%, rgba(124, 58, 237, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-pink:checked), .bg-swatch--checker-pink {
    background-color: #fdf0f7;
    background-image:
      linear-gradient(45deg, rgba(232, 54, 143, 0.14) 25%, transparent 25%, transparent 75%, rgba(232, 54, 143, 0.14) 75%),
      linear-gradient(45deg, rgba(232, 54, 143, 0.14) 25%, transparent 25%, transparent 75%, rgba(232, 54, 143, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-teal:checked), .bg-swatch--checker-teal {
    background-color: #eafbfd;
    background-image:
      linear-gradient(45deg, rgba(18, 182, 201, 0.14) 25%, transparent 25%, transparent 75%, rgba(18, 182, 201, 0.14) 75%),
      linear-gradient(45deg, rgba(18, 182, 201, 0.14) 25%, transparent 25%, transparent 75%, rgba(18, 182, 201, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-mono:checked), .bg-swatch--checker-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(45deg, rgba(107, 114, 128, 0.14) 25%, transparent 25%, transparent 75%, rgba(107, 114, 128, 0.14) 75%),
      linear-gradient(45deg, rgba(107, 114, 128, 0.14) 25%, transparent 25%, transparent 75%, rgba(107, 114, 128, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }
  body:has(#bg-checker-black:checked), .bg-swatch--checker-black {
    background-color: #fafafa;
    background-image:
      linear-gradient(45deg, rgba(20, 22, 26, 0.14) 25%, transparent 25%, transparent 75%, rgba(20, 22, 26, 0.14) 75%),
      linear-gradient(45deg, rgba(20, 22, 26, 0.14) 25%, transparent 25%, transparent 75%, rgba(20, 22, 26, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  /* ---------- 等高線（10色） ---------- */
  body:has(#bg-topo-green:checked), .bg-swatch--topo-green {
    background-color: #f6faf1;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(111, 174, 47, 0.24) 15px, rgba(111, 174, 47, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(111, 174, 47, 0.18) 19px, rgba(111, 174, 47, 0.18) 20px);
  }
  body:has(#bg-topo-yellow:checked), .bg-swatch--topo-yellow {
    background-color: #fffbf0;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(242, 183, 5, 0.24) 15px, rgba(242, 183, 5, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(242, 183, 5, 0.18) 19px, rgba(242, 183, 5, 0.18) 20px);
  }
  body:has(#bg-topo-red:checked), .bg-swatch--topo-red {
    background-color: #fff5f5;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(229, 56, 59, 0.24) 15px, rgba(229, 56, 59, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(229, 56, 59, 0.18) 19px, rgba(229, 56, 59, 0.18) 20px);
  }
  body:has(#bg-topo-blue:checked), .bg-swatch--topo-blue {
    background-color: #f0f5ff;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(34, 85, 209, 0.24) 15px, rgba(34, 85, 209, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(34, 85, 209, 0.18) 19px, rgba(34, 85, 209, 0.18) 20px);
  }
  body:has(#bg-topo-orange:checked), .bg-swatch--topo-orange {
    background-color: #fff4ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(232, 114, 12, 0.24) 15px, rgba(232, 114, 12, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(232, 114, 12, 0.18) 19px, rgba(232, 114, 12, 0.18) 20px);
  }
  body:has(#bg-topo-purple:checked), .bg-swatch--topo-purple {
    background-color: #f7f0fc;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(124, 58, 237, 0.24) 15px, rgba(124, 58, 237, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(124, 58, 237, 0.18) 19px, rgba(124, 58, 237, 0.18) 20px);
  }
  body:has(#bg-topo-pink:checked), .bg-swatch--topo-pink {
    background-color: #fdf0f7;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(232, 54, 143, 0.24) 15px, rgba(232, 54, 143, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(232, 54, 143, 0.18) 19px, rgba(232, 54, 143, 0.18) 20px);
  }
  body:has(#bg-topo-teal:checked), .bg-swatch--topo-teal {
    background-color: #eafbfd;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(18, 182, 201, 0.24) 15px, rgba(18, 182, 201, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(18, 182, 201, 0.18) 19px, rgba(18, 182, 201, 0.18) 20px);
  }
  body:has(#bg-topo-mono:checked), .bg-swatch--topo-mono {
    background-color: #f5f5f4;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(107, 114, 128, 0.24) 15px, rgba(107, 114, 128, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(107, 114, 128, 0.18) 19px, rgba(107, 114, 128, 0.18) 20px);
  }
  body:has(#bg-topo-black:checked), .bg-swatch--topo-black {
    background-color: #fafafa;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(20, 22, 26, 0.24) 15px, rgba(20, 22, 26, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(20, 22, 26, 0.18) 19px, rgba(20, 22, 26, 0.18) 20px);
  }

  /* ---------- スパークル（10色） ---------- */
  body:has(#bg-sparkle-green:checked), .bg-swatch--sparkle-green {
    background-color: #f6faf1;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(111, 174, 47, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(111, 174, 47, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(111, 174, 47, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(111, 174, 47, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(111, 174, 47, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(111, 174, 47, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(111, 174, 47, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-yellow:checked), .bg-swatch--sparkle-yellow {
    background-color: #fffbf0;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(242, 183, 5, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(242, 183, 5, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(242, 183, 5, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(242, 183, 5, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(242, 183, 5, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(242, 183, 5, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(242, 183, 5, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-red:checked), .bg-swatch--sparkle-red {
    background-color: #fff5f5;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(229, 56, 59, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(229, 56, 59, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(229, 56, 59, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(229, 56, 59, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(229, 56, 59, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(229, 56, 59, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(229, 56, 59, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-blue:checked), .bg-swatch--sparkle-blue {
    background-color: #f0f5ff;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(34, 85, 209, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(34, 85, 209, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(34, 85, 209, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(34, 85, 209, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(34, 85, 209, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(34, 85, 209, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(34, 85, 209, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-orange:checked), .bg-swatch--sparkle-orange {
    background-color: #fff4ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(232, 114, 12, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(232, 114, 12, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(232, 114, 12, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(232, 114, 12, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(232, 114, 12, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(232, 114, 12, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(232, 114, 12, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-purple:checked), .bg-swatch--sparkle-purple {
    background-color: #f7f0fc;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(124, 58, 237, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(124, 58, 237, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(124, 58, 237, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(124, 58, 237, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(124, 58, 237, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(124, 58, 237, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(124, 58, 237, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-pink:checked), .bg-swatch--sparkle-pink {
    background-color: #fdf0f7;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(232, 54, 143, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(232, 54, 143, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(232, 54, 143, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(232, 54, 143, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(232, 54, 143, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(232, 54, 143, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(232, 54, 143, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-teal:checked), .bg-swatch--sparkle-teal {
    background-color: #eafbfd;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(18, 182, 201, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(18, 182, 201, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(18, 182, 201, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(18, 182, 201, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(18, 182, 201, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(18, 182, 201, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(18, 182, 201, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-mono:checked), .bg-swatch--sparkle-mono {
    background-color: #f5f5f4;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(107, 114, 128, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(107, 114, 128, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(107, 114, 128, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(107, 114, 128, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(107, 114, 128, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(107, 114, 128, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(107, 114, 128, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }
  body:has(#bg-sparkle-black:checked), .bg-swatch--sparkle-black {
    background-color: #fafafa;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(20, 22, 26, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(20, 22, 26, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(20, 22, 26, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(20, 22, 26, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(20, 22, 26, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(20, 22, 26, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(20, 22, 26, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  /* ---------- クロスハッチ（10色） ---------- */
  body:has(#bg-crosshatch-green:checked), .bg-swatch--crosshatch-green {
    background-color: #f6faf1;
    background-image:
      repeating-linear-gradient(60deg, rgba(111, 174, 47, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(111, 174, 47, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-yellow:checked), .bg-swatch--crosshatch-yellow {
    background-color: #fffbf0;
    background-image:
      repeating-linear-gradient(60deg, rgba(242, 183, 5, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(242, 183, 5, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-red:checked), .bg-swatch--crosshatch-red {
    background-color: #fff5f5;
    background-image:
      repeating-linear-gradient(60deg, rgba(229, 56, 59, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(229, 56, 59, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-blue:checked), .bg-swatch--crosshatch-blue {
    background-color: #f0f5ff;
    background-image:
      repeating-linear-gradient(60deg, rgba(34, 85, 209, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(34, 85, 209, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-orange:checked), .bg-swatch--crosshatch-orange {
    background-color: #fff4ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(232, 114, 12, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(232, 114, 12, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-purple:checked), .bg-swatch--crosshatch-purple {
    background-color: #f7f0fc;
    background-image:
      repeating-linear-gradient(60deg, rgba(124, 58, 237, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(124, 58, 237, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-pink:checked), .bg-swatch--crosshatch-pink {
    background-color: #fdf0f7;
    background-image:
      repeating-linear-gradient(60deg, rgba(232, 54, 143, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(232, 54, 143, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-teal:checked), .bg-swatch--crosshatch-teal {
    background-color: #eafbfd;
    background-image:
      repeating-linear-gradient(60deg, rgba(18, 182, 201, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(18, 182, 201, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-mono:checked), .bg-swatch--crosshatch-mono {
    background-color: #f5f5f4;
    background-image:
      repeating-linear-gradient(60deg, rgba(107, 114, 128, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(107, 114, 128, 0.2) 0 1px, transparent 1px 12px);
  }
  body:has(#bg-crosshatch-black:checked), .bg-swatch--crosshatch-black {
    background-color: #fafafa;
    background-image:
      repeating-linear-gradient(60deg, rgba(20, 22, 26, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(20, 22, 26, 0.2) 0 1px, transparent 1px 12px);
  }

  /* ---------- ヘリンボーン（10色） ---------- */
  body:has(#bg-herringbone-green:checked), .bg-swatch--herringbone-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(45deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(111, 174, 47, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(111, 174, 47, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-yellow:checked), .bg-swatch--herringbone-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(45deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(242, 183, 5, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(242, 183, 5, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-red:checked), .bg-swatch--herringbone-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(45deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(229, 56, 59, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(229, 56, 59, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-blue:checked), .bg-swatch--herringbone-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(45deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(34, 85, 209, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(34, 85, 209, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-orange:checked), .bg-swatch--herringbone-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(45deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(232, 114, 12, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(232, 114, 12, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-purple:checked), .bg-swatch--herringbone-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(45deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(124, 58, 237, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(124, 58, 237, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-pink:checked), .bg-swatch--herringbone-pink {
    background-color: #fdf0f7;
    background-image:
      linear-gradient(45deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(232, 54, 143, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(232, 54, 143, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-teal:checked), .bg-swatch--herringbone-teal {
    background-color: #eafbfd;
    background-image:
      linear-gradient(45deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(18, 182, 201, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(18, 182, 201, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-mono:checked), .bg-swatch--herringbone-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(45deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(107, 114, 128, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(107, 114, 128, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  body:has(#bg-herringbone-black:checked), .bg-swatch--herringbone-black {
    background-color: #fafafa;
    background-image:
      linear-gradient(45deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(20, 22, 26, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(20, 22, 26, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  /* ---------- シェブロン（10色） ---------- */
  body:has(#bg-chevron-green:checked), .bg-swatch--chevron-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(135deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(111, 174, 47, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-yellow:checked), .bg-swatch--chevron-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(135deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(242, 183, 5, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-red:checked), .bg-swatch--chevron-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(135deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(229, 56, 59, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-blue:checked), .bg-swatch--chevron-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(135deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(34, 85, 209, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-orange:checked), .bg-swatch--chevron-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(135deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(232, 114, 12, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-purple:checked), .bg-swatch--chevron-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(135deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(124, 58, 237, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-pink:checked), .bg-swatch--chevron-pink {
    background-color: #fdf0f7;
    background-image:
      linear-gradient(135deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(232, 54, 143, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-teal:checked), .bg-swatch--chevron-teal {
    background-color: #eafbfd;
    background-image:
      linear-gradient(135deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(18, 182, 201, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-mono:checked), .bg-swatch--chevron-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(135deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(107, 114, 128, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }
  body:has(#bg-chevron-black:checked), .bg-swatch--chevron-black {
    background-color: #fafafa;
    background-image:
      linear-gradient(135deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(20, 22, 26, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  /* ---------- 波形ライン（10色） ---------- */
  body:has(#bg-wave-green:checked), .bg-swatch--wave-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%236fae2f' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-yellow:checked), .bg-swatch--wave-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f2b705' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-red:checked), .bg-swatch--wave-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23e5383b' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-blue:checked), .bg-swatch--wave-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%232255d1' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-orange:checked), .bg-swatch--wave-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23e8720c' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-purple:checked), .bg-swatch--wave-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%237c3aed' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-pink:checked), .bg-swatch--wave-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23e8368f' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-teal:checked), .bg-swatch--wave-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%2312b6c9' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-mono:checked), .bg-swatch--wave-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%236b7280' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }
  body:has(#bg-wave-black:checked), .bg-swatch--wave-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%2314161a' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  /* ---------- レンガ調（10色） ---------- */

  body:has(#bg-brick-green:checked), .bg-swatch--brick-green {
    background-color: #6fae2f;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f6faf1 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f6faf1 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-yellow:checked), .bg-swatch--brick-yellow {
    background-color: #f2b705;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fffbf0 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fffbf0 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-red:checked), .bg-swatch--brick-red {
    background-color: #e5383b;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fff5f5 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fff5f5 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-blue:checked), .bg-swatch--brick-blue {
    background-color: #2255d1;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f0f5ff 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f0f5ff 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-orange:checked), .bg-swatch--brick-orange {
    background-color: #e8720c;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fff4ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fff4ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-purple:checked), .bg-swatch--brick-purple {
    background-color: #7c3aed;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f7f0fc 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f7f0fc 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pink:checked), .bg-swatch--brick-pink {
    background-color: #e8368f;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdf0f7 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdf0f7 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-teal:checked), .bg-swatch--brick-teal {
    background-color: #12b6c9;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #eafbfd 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #eafbfd 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-mono:checked), .bg-swatch--brick-mono {
    background-color: #6b7280;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f5f5f4 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f5f5f4 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-black:checked), .bg-swatch--brick-black {
    background-color: #14161a;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fafafa 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fafafa 0);
    background-size: 58px 29px;
  }

  /* ---------- ギンガムチェック（ビビッド10色） ---------- */

  body:has(#bg-gingham-green:checked), .bg-swatch--gingham-green {
    background-color: #f6faf1;
    background-image:
      repeating-linear-gradient(90deg, rgba(111, 174, 47, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(111, 174, 47, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-yellow:checked), .bg-swatch--gingham-yellow {
    background-color: #fffbf0;
    background-image:
      repeating-linear-gradient(90deg, rgba(242, 183, 5, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(242, 183, 5, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-red:checked), .bg-swatch--gingham-red {
    background-color: #fff5f5;
    background-image:
      repeating-linear-gradient(90deg, rgba(229, 56, 59, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(229, 56, 59, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-blue:checked), .bg-swatch--gingham-blue {
    background-color: #f0f5ff;
    background-image:
      repeating-linear-gradient(90deg, rgba(34, 85, 209, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(34, 85, 209, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-orange:checked), .bg-swatch--gingham-orange {
    background-color: #fff4ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(232, 114, 12, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(232, 114, 12, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-purple:checked), .bg-swatch--gingham-purple {
    background-color: #f7f0fc;
    background-image:
      repeating-linear-gradient(90deg, rgba(124, 58, 237, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(124, 58, 237, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pink:checked), .bg-swatch--gingham-pink {
    background-color: #fdf0f7;
    background-image:
      repeating-linear-gradient(90deg, rgba(232, 54, 143, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(232, 54, 143, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-teal:checked), .bg-swatch--gingham-teal {
    background-color: #eafbfd;
    background-image:
      repeating-linear-gradient(90deg, rgba(18, 182, 201, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(18, 182, 201, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-mono:checked), .bg-swatch--gingham-mono {
    background-color: #f5f5f4;
    background-image:
      repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(107, 114, 128, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-black:checked), .bg-swatch--gingham-black {
    background-color: #fafafa;
    background-image:
      repeating-linear-gradient(90deg, rgba(20, 22, 26, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(20, 22, 26, 0.22) 0 10px, transparent 10px 24px);
  }


  /* ---------- クロス柄（ビビッド10色） ---------- */

  body:has(#bg-cross-green:checked), .bg-swatch--cross-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%236fae2f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-yellow:checked), .bg-swatch--cross-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f2b705' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-red:checked), .bg-swatch--cross-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23e5383b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-blue:checked), .bg-swatch--cross-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%232255d1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-orange:checked), .bg-swatch--cross-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23e8720c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-purple:checked), .bg-swatch--cross-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%237c3aed' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pink:checked), .bg-swatch--cross-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23e8368f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-teal:checked), .bg-swatch--cross-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%2312b6c9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-mono:checked), .bg-swatch--cross-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-black:checked), .bg-swatch--cross-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%2314161a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  /* ---------- ステッチ（ビビッド10色） ---------- */

  body:has(#bg-stitch-green:checked), .bg-swatch--stitch-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%236fae2f' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-yellow:checked), .bg-swatch--stitch-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f2b705' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-red:checked), .bg-swatch--stitch-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23e5383b' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-blue:checked), .bg-swatch--stitch-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%232255d1' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-orange:checked), .bg-swatch--stitch-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23e8720c' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-purple:checked), .bg-swatch--stitch-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%237c3aed' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pink:checked), .bg-swatch--stitch-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23e8368f' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-teal:checked), .bg-swatch--stitch-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%2312b6c9' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-mono:checked), .bg-swatch--stitch-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%236b7280' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-black:checked), .bg-swatch--stitch-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%2314161a' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  /* ---------- 紙のグレイン（ビビッド10色） ---------- */

  body:has(#bg-grain-green:checked), .bg-swatch--grain-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.435 0 0 0 0 0.682 0 0 0 0 0.184 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-yellow:checked), .bg-swatch--grain-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.949 0 0 0 0 0.718 0 0 0 0 0.020 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-red:checked), .bg-swatch--grain-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.898 0 0 0 0 0.220 0 0 0 0 0.231 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-blue:checked), .bg-swatch--grain-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.133 0 0 0 0 0.333 0 0 0 0 0.820 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-orange:checked), .bg-swatch--grain-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.910 0 0 0 0 0.447 0 0 0 0 0.047 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-purple:checked), .bg-swatch--grain-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.486 0 0 0 0 0.227 0 0 0 0 0.929 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pink:checked), .bg-swatch--grain-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.910 0 0 0 0 0.212 0 0 0 0 0.561 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-teal:checked), .bg-swatch--grain-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.071 0 0 0 0 0.714 0 0 0 0 0.788 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-mono:checked), .bg-swatch--grain-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.420 0 0 0 0 0.447 0 0 0 0 0.502 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-black:checked), .bg-swatch--grain-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.078 0 0 0 0 0.086 0 0 0 0 0.102 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  /* ---------- 回路基板（ビビッド10色） ---------- */

  body:has(#bg-circuit-green:checked), .bg-swatch--circuit-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%236fae2f' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%236fae2f'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-yellow:checked), .bg-swatch--circuit-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f2b705' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f2b705'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-red:checked), .bg-swatch--circuit-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23e5383b' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23e5383b'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-blue:checked), .bg-swatch--circuit-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%232255d1' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%232255d1'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-orange:checked), .bg-swatch--circuit-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23e8720c' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23e8720c'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-purple:checked), .bg-swatch--circuit-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%237c3aed' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%237c3aed'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pink:checked), .bg-swatch--circuit-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23e8368f' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23e8368f'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-teal:checked), .bg-swatch--circuit-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%2312b6c9' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%2312b6c9'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-mono:checked), .bg-swatch--circuit-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%236b7280'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-black:checked), .bg-swatch--circuit-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%2314161a' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%2314161a'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  /* ---------- ドット（くすみ10色） ---------- */

  body:has(#bg-dots-smoky-green:checked), .bg-swatch--dots-smoky-green {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(139, 168, 136, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-yellow:checked), .bg-swatch--dots-smoky-yellow {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(201, 168, 76, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-red:checked), .bg-swatch--dots-smoky-red {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(192, 112, 89, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-blue:checked), .bg-swatch--dots-smoky-blue {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(107, 135, 168, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-orange:checked), .bg-swatch--dots-smoky-orange {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(198, 138, 90, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-purple:checked), .bg-swatch--dots-smoky-purple {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(154, 134, 168, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-pink:checked), .bg-swatch--dots-smoky-pink {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(201, 141, 150, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-teal:checked), .bg-swatch--dots-smoky-teal {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(122, 168, 161, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-mono:checked), .bg-swatch--dots-smoky-mono {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(168, 162, 154, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-smoky-black:checked), .bg-swatch--dots-smoky-black {
    background-color: #f4f1ec;
    background-image: radial-gradient(circle, rgba(58, 61, 63, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  /* ---------- ストライプ（くすみ10色） ---------- */

  body:has(#bg-stripe-smoky-green:checked), .bg-swatch--stripe-smoky-green {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(139, 168, 136, 0.18) 0px, rgba(139, 168, 136, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-yellow:checked), .bg-swatch--stripe-smoky-yellow {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(201, 168, 76, 0.18) 0px, rgba(201, 168, 76, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-red:checked), .bg-swatch--stripe-smoky-red {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(192, 112, 89, 0.18) 0px, rgba(192, 112, 89, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-blue:checked), .bg-swatch--stripe-smoky-blue {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(107, 135, 168, 0.18) 0px, rgba(107, 135, 168, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-orange:checked), .bg-swatch--stripe-smoky-orange {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(198, 138, 90, 0.18) 0px, rgba(198, 138, 90, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-purple:checked), .bg-swatch--stripe-smoky-purple {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(154, 134, 168, 0.18) 0px, rgba(154, 134, 168, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-pink:checked), .bg-swatch--stripe-smoky-pink {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(201, 141, 150, 0.18) 0px, rgba(201, 141, 150, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-teal:checked), .bg-swatch--stripe-smoky-teal {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(122, 168, 161, 0.18) 0px, rgba(122, 168, 161, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-mono:checked), .bg-swatch--stripe-smoky-mono {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(168, 162, 154, 0.18) 0px, rgba(168, 162, 154, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-smoky-black:checked), .bg-swatch--stripe-smoky-black {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(58, 61, 63, 0.18) 0px, rgba(58, 61, 63, 0.18) 10px, transparent 10px, transparent 24px);
  }

  /* ---------- グラフ用紙（くすみ10色） ---------- */

  body:has(#bg-graph-smoky-green:checked), .bg-swatch--graph-smoky-green {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(139, 168, 136, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 168, 136, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-yellow:checked), .bg-swatch--graph-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(201, 168, 76, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201, 168, 76, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-red:checked), .bg-swatch--graph-smoky-red {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(192, 112, 89, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(192, 112, 89, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-blue:checked), .bg-swatch--graph-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(107, 135, 168, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(107, 135, 168, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-orange:checked), .bg-swatch--graph-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(198, 138, 90, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(198, 138, 90, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-purple:checked), .bg-swatch--graph-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(154, 134, 168, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(154, 134, 168, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-pink:checked), .bg-swatch--graph-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(201, 141, 150, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201, 141, 150, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-teal:checked), .bg-swatch--graph-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(122, 168, 161, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(122, 168, 161, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-mono:checked), .bg-swatch--graph-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(168, 162, 154, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 162, 154, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-smoky-black:checked), .bg-swatch--graph-smoky-black {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(rgba(58, 61, 63, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(58, 61, 63, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* ---------- バブル（くすみ10色） ---------- */

  body:has(#bg-bubbles-smoky-green:checked), .bg-swatch--bubbles-smoky-green {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(139, 168, 136, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(139, 168, 136, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(139, 168, 136, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(139, 168, 136, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(139, 168, 136, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(139, 168, 136, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-yellow:checked), .bg-swatch--bubbles-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(201, 168, 76, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(201, 168, 76, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(201, 168, 76, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(201, 168, 76, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(201, 168, 76, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(201, 168, 76, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-red:checked), .bg-swatch--bubbles-smoky-red {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(192, 112, 89, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(192, 112, 89, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(192, 112, 89, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(192, 112, 89, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(192, 112, 89, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(192, 112, 89, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-blue:checked), .bg-swatch--bubbles-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(107, 135, 168, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(107, 135, 168, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(107, 135, 168, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(107, 135, 168, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(107, 135, 168, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(107, 135, 168, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-orange:checked), .bg-swatch--bubbles-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(198, 138, 90, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(198, 138, 90, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(198, 138, 90, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(198, 138, 90, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(198, 138, 90, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(198, 138, 90, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-purple:checked), .bg-swatch--bubbles-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(154, 134, 168, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(154, 134, 168, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(154, 134, 168, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(154, 134, 168, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(154, 134, 168, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(154, 134, 168, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-pink:checked), .bg-swatch--bubbles-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(201, 141, 150, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(201, 141, 150, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(201, 141, 150, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(201, 141, 150, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(201, 141, 150, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(201, 141, 150, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-teal:checked), .bg-swatch--bubbles-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(122, 168, 161, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(122, 168, 161, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(122, 168, 161, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(122, 168, 161, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(122, 168, 161, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(122, 168, 161, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-mono:checked), .bg-swatch--bubbles-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(168, 162, 154, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(168, 162, 154, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(168, 162, 154, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(168, 162, 154, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(168, 162, 154, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(168, 162, 154, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-smoky-black:checked), .bg-swatch--bubbles-smoky-black {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(58, 61, 63, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(58, 61, 63, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(58, 61, 63, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(58, 61, 63, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(58, 61, 63, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(58, 61, 63, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  /* ---------- アーガイル（くすみ10色） ---------- */

  body:has(#bg-argyle-smoky-green:checked), .bg-swatch--argyle-smoky-green {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(139, 168, 136, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(139, 168, 136, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-yellow:checked), .bg-swatch--argyle-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(201, 168, 76, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(201, 168, 76, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-red:checked), .bg-swatch--argyle-smoky-red {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(192, 112, 89, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(192, 112, 89, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-blue:checked), .bg-swatch--argyle-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(107, 135, 168, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(107, 135, 168, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-orange:checked), .bg-swatch--argyle-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(198, 138, 90, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(198, 138, 90, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-purple:checked), .bg-swatch--argyle-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(154, 134, 168, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(154, 134, 168, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-pink:checked), .bg-swatch--argyle-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(201, 141, 150, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(201, 141, 150, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-teal:checked), .bg-swatch--argyle-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(122, 168, 161, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(122, 168, 161, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-mono:checked), .bg-swatch--argyle-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(168, 162, 154, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(168, 162, 154, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-smoky-black:checked), .bg-swatch--argyle-smoky-black {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(45deg, rgba(58, 61, 63, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(58, 61, 63, 0.2) 0 2px, transparent 2px 40px);
  }

  /* ---------- チェッカー（くすみ10色） ---------- */

  body:has(#bg-checker-smoky-green:checked), .bg-swatch--checker-smoky-green {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(139, 168, 136, 0.14) 25%, transparent 25%, transparent 75%, rgba(139, 168, 136, 0.14) 75%),
      linear-gradient(45deg, rgba(139, 168, 136, 0.14) 25%, transparent 25%, transparent 75%, rgba(139, 168, 136, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-yellow:checked), .bg-swatch--checker-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(201, 168, 76, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 168, 76, 0.14) 75%),
      linear-gradient(45deg, rgba(201, 168, 76, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 168, 76, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-red:checked), .bg-swatch--checker-smoky-red {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(192, 112, 89, 0.14) 25%, transparent 25%, transparent 75%, rgba(192, 112, 89, 0.14) 75%),
      linear-gradient(45deg, rgba(192, 112, 89, 0.14) 25%, transparent 25%, transparent 75%, rgba(192, 112, 89, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-blue:checked), .bg-swatch--checker-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(107, 135, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(107, 135, 168, 0.14) 75%),
      linear-gradient(45deg, rgba(107, 135, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(107, 135, 168, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-orange:checked), .bg-swatch--checker-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(198, 138, 90, 0.14) 25%, transparent 25%, transparent 75%, rgba(198, 138, 90, 0.14) 75%),
      linear-gradient(45deg, rgba(198, 138, 90, 0.14) 25%, transparent 25%, transparent 75%, rgba(198, 138, 90, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-purple:checked), .bg-swatch--checker-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(154, 134, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(154, 134, 168, 0.14) 75%),
      linear-gradient(45deg, rgba(154, 134, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(154, 134, 168, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-pink:checked), .bg-swatch--checker-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(201, 141, 150, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 141, 150, 0.14) 75%),
      linear-gradient(45deg, rgba(201, 141, 150, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 141, 150, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-teal:checked), .bg-swatch--checker-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(122, 168, 161, 0.14) 25%, transparent 25%, transparent 75%, rgba(122, 168, 161, 0.14) 75%),
      linear-gradient(45deg, rgba(122, 168, 161, 0.14) 25%, transparent 25%, transparent 75%, rgba(122, 168, 161, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-mono:checked), .bg-swatch--checker-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(168, 162, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 162, 154, 0.14) 75%),
      linear-gradient(45deg, rgba(168, 162, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 162, 154, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-smoky-black:checked), .bg-swatch--checker-smoky-black {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(58, 61, 63, 0.14) 25%, transparent 25%, transparent 75%, rgba(58, 61, 63, 0.14) 75%),
      linear-gradient(45deg, rgba(58, 61, 63, 0.14) 25%, transparent 25%, transparent 75%, rgba(58, 61, 63, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  /* ---------- 等高線（くすみ10色） ---------- */

  body:has(#bg-topo-smoky-green:checked), .bg-swatch--topo-smoky-green {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(139, 168, 136, 0.24) 15px, rgba(139, 168, 136, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(139, 168, 136, 0.18) 19px, rgba(139, 168, 136, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-yellow:checked), .bg-swatch--topo-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(201, 168, 76, 0.24) 15px, rgba(201, 168, 76, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(201, 168, 76, 0.18) 19px, rgba(201, 168, 76, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-red:checked), .bg-swatch--topo-smoky-red {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(192, 112, 89, 0.24) 15px, rgba(192, 112, 89, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(192, 112, 89, 0.18) 19px, rgba(192, 112, 89, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-blue:checked), .bg-swatch--topo-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(107, 135, 168, 0.24) 15px, rgba(107, 135, 168, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(107, 135, 168, 0.18) 19px, rgba(107, 135, 168, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-orange:checked), .bg-swatch--topo-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(198, 138, 90, 0.24) 15px, rgba(198, 138, 90, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(198, 138, 90, 0.18) 19px, rgba(198, 138, 90, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-purple:checked), .bg-swatch--topo-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(154, 134, 168, 0.24) 15px, rgba(154, 134, 168, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(154, 134, 168, 0.18) 19px, rgba(154, 134, 168, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-pink:checked), .bg-swatch--topo-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(201, 141, 150, 0.24) 15px, rgba(201, 141, 150, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(201, 141, 150, 0.18) 19px, rgba(201, 141, 150, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-teal:checked), .bg-swatch--topo-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(122, 168, 161, 0.24) 15px, rgba(122, 168, 161, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(122, 168, 161, 0.18) 19px, rgba(122, 168, 161, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-mono:checked), .bg-swatch--topo-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(168, 162, 154, 0.24) 15px, rgba(168, 162, 154, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(168, 162, 154, 0.18) 19px, rgba(168, 162, 154, 0.18) 20px);
  }

  body:has(#bg-topo-smoky-black:checked), .bg-swatch--topo-smoky-black {
    background-color: #f4f1ec;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(58, 61, 63, 0.24) 15px, rgba(58, 61, 63, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(58, 61, 63, 0.18) 19px, rgba(58, 61, 63, 0.18) 20px);
  }

  /* ---------- スパークル（くすみ10色） ---------- */

  body:has(#bg-sparkle-smoky-green:checked), .bg-swatch--sparkle-smoky-green {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(139, 168, 136, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(139, 168, 136, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(139, 168, 136, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(139, 168, 136, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(139, 168, 136, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(139, 168, 136, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(139, 168, 136, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-yellow:checked), .bg-swatch--sparkle-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(201, 168, 76, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(201, 168, 76, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(201, 168, 76, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(201, 168, 76, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(201, 168, 76, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(201, 168, 76, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(201, 168, 76, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-red:checked), .bg-swatch--sparkle-smoky-red {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(192, 112, 89, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(192, 112, 89, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(192, 112, 89, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(192, 112, 89, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(192, 112, 89, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(192, 112, 89, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(192, 112, 89, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-blue:checked), .bg-swatch--sparkle-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(107, 135, 168, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(107, 135, 168, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(107, 135, 168, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(107, 135, 168, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(107, 135, 168, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(107, 135, 168, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(107, 135, 168, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-orange:checked), .bg-swatch--sparkle-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(198, 138, 90, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(198, 138, 90, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(198, 138, 90, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(198, 138, 90, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(198, 138, 90, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(198, 138, 90, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(198, 138, 90, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-purple:checked), .bg-swatch--sparkle-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(154, 134, 168, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(154, 134, 168, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(154, 134, 168, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(154, 134, 168, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(154, 134, 168, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(154, 134, 168, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(154, 134, 168, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-pink:checked), .bg-swatch--sparkle-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(201, 141, 150, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(201, 141, 150, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(201, 141, 150, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(201, 141, 150, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(201, 141, 150, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(201, 141, 150, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(201, 141, 150, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-teal:checked), .bg-swatch--sparkle-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(122, 168, 161, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(122, 168, 161, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(122, 168, 161, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(122, 168, 161, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(122, 168, 161, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(122, 168, 161, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(122, 168, 161, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-mono:checked), .bg-swatch--sparkle-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(168, 162, 154, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(168, 162, 154, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(168, 162, 154, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(168, 162, 154, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(168, 162, 154, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(168, 162, 154, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(168, 162, 154, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-smoky-black:checked), .bg-swatch--sparkle-smoky-black {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(58, 61, 63, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(58, 61, 63, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(58, 61, 63, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(58, 61, 63, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(58, 61, 63, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(58, 61, 63, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(58, 61, 63, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  /* ---------- クロスハッチ（くすみ10色） ---------- */

  body:has(#bg-crosshatch-smoky-green:checked), .bg-swatch--crosshatch-smoky-green {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(139, 168, 136, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(139, 168, 136, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-yellow:checked), .bg-swatch--crosshatch-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(201, 168, 76, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(201, 168, 76, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-red:checked), .bg-swatch--crosshatch-smoky-red {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(192, 112, 89, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(192, 112, 89, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-blue:checked), .bg-swatch--crosshatch-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(107, 135, 168, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(107, 135, 168, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-orange:checked), .bg-swatch--crosshatch-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(198, 138, 90, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(198, 138, 90, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-purple:checked), .bg-swatch--crosshatch-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(154, 134, 168, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(154, 134, 168, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-pink:checked), .bg-swatch--crosshatch-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(201, 141, 150, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(201, 141, 150, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-teal:checked), .bg-swatch--crosshatch-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(122, 168, 161, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(122, 168, 161, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-mono:checked), .bg-swatch--crosshatch-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(168, 162, 154, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(168, 162, 154, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-smoky-black:checked), .bg-swatch--crosshatch-smoky-black {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(60deg, rgba(58, 61, 63, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(58, 61, 63, 0.2) 0 1px, transparent 1px 12px);
  }

  /* ---------- ヘリンボーン（くすみ10色） ---------- */

  body:has(#bg-herringbone-smoky-green:checked), .bg-swatch--herringbone-smoky-green {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(139, 168, 136, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(139, 168, 136, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-yellow:checked), .bg-swatch--herringbone-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(201, 168, 76, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(201, 168, 76, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-red:checked), .bg-swatch--herringbone-smoky-red {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(192, 112, 89, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(192, 112, 89, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-blue:checked), .bg-swatch--herringbone-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(107, 135, 168, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(107, 135, 168, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-orange:checked), .bg-swatch--herringbone-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(198, 138, 90, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(198, 138, 90, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-purple:checked), .bg-swatch--herringbone-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(154, 134, 168, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(154, 134, 168, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-pink:checked), .bg-swatch--herringbone-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(201, 141, 150, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(201, 141, 150, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-teal:checked), .bg-swatch--herringbone-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(122, 168, 161, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(122, 168, 161, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-mono:checked), .bg-swatch--herringbone-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(168, 162, 154, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(168, 162, 154, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-smoky-black:checked), .bg-swatch--herringbone-smoky-black {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(58, 61, 63, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(58, 61, 63, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  /* ---------- シェブロン（くすみ10色） ---------- */

  body:has(#bg-chevron-smoky-green:checked), .bg-swatch--chevron-smoky-green {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(139, 168, 136, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-yellow:checked), .bg-swatch--chevron-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(201, 168, 76, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-red:checked), .bg-swatch--chevron-smoky-red {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(192, 112, 89, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-blue:checked), .bg-swatch--chevron-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(107, 135, 168, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-orange:checked), .bg-swatch--chevron-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(198, 138, 90, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-purple:checked), .bg-swatch--chevron-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(154, 134, 168, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-pink:checked), .bg-swatch--chevron-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(201, 141, 150, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-teal:checked), .bg-swatch--chevron-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(122, 168, 161, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-mono:checked), .bg-swatch--chevron-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(168, 162, 154, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-smoky-black:checked), .bg-swatch--chevron-smoky-black {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(135deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(58, 61, 63, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  /* ---------- 波形ライン（くすみ10色） ---------- */

  body:has(#bg-wave-smoky-green:checked), .bg-swatch--wave-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%238ba888' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-yellow:checked), .bg-swatch--wave-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c9a84c' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-red:checked), .bg-swatch--wave-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c07059' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-blue:checked), .bg-swatch--wave-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%236b87a8' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-orange:checked), .bg-swatch--wave-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c68a5a' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-purple:checked), .bg-swatch--wave-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%239a86a8' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-pink:checked), .bg-swatch--wave-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c98d96' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-teal:checked), .bg-swatch--wave-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%237aa8a1' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-mono:checked), .bg-swatch--wave-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23a8a29a' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-smoky-black:checked), .bg-swatch--wave-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%233a3d3f' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  /* ---------- レンガ調（くすみ10色） ---------- */

  body:has(#bg-brick-smoky-green:checked), .bg-swatch--brick-smoky-green {
    background-color: #8ba888;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-yellow:checked), .bg-swatch--brick-smoky-yellow {
    background-color: #c9a84c;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-red:checked), .bg-swatch--brick-smoky-red {
    background-color: #c07059;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-blue:checked), .bg-swatch--brick-smoky-blue {
    background-color: #6b87a8;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-orange:checked), .bg-swatch--brick-smoky-orange {
    background-color: #c68a5a;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-purple:checked), .bg-swatch--brick-smoky-purple {
    background-color: #9a86a8;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-pink:checked), .bg-swatch--brick-smoky-pink {
    background-color: #c98d96;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-teal:checked), .bg-swatch--brick-smoky-teal {
    background-color: #7aa8a1;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-mono:checked), .bg-swatch--brick-smoky-mono {
    background-color: #a8a29a;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-smoky-black:checked), .bg-swatch--brick-smoky-black {
    background-color: #3a3d3f;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #f4f1ec 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #f4f1ec 0);
    background-size: 58px 29px;
  }

  /* ---------- ギンガムチェック（くすみ10色） ---------- */

  body:has(#bg-gingham-smoky-green:checked), .bg-swatch--gingham-smoky-green {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(139, 168, 136, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(139, 168, 136, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-yellow:checked), .bg-swatch--gingham-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 168, 76, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(201, 168, 76, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-red:checked), .bg-swatch--gingham-smoky-red {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(192, 112, 89, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(192, 112, 89, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-blue:checked), .bg-swatch--gingham-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(107, 135, 168, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(107, 135, 168, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-orange:checked), .bg-swatch--gingham-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(198, 138, 90, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(198, 138, 90, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-purple:checked), .bg-swatch--gingham-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(154, 134, 168, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(154, 134, 168, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-pink:checked), .bg-swatch--gingham-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 141, 150, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(201, 141, 150, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-teal:checked), .bg-swatch--gingham-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(122, 168, 161, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(122, 168, 161, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-mono:checked), .bg-swatch--gingham-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 162, 154, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(168, 162, 154, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-smoky-black:checked), .bg-swatch--gingham-smoky-black {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(58, 61, 63, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(58, 61, 63, 0.22) 0 10px, transparent 10px 24px);
  }


  /* ---------- クロス柄（くすみ10色） ---------- */

  body:has(#bg-cross-smoky-green:checked), .bg-swatch--cross-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%238ba888' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-yellow:checked), .bg-swatch--cross-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c9a84c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-red:checked), .bg-swatch--cross-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c07059' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-blue:checked), .bg-swatch--cross-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%236b87a8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-orange:checked), .bg-swatch--cross-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c68a5a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-purple:checked), .bg-swatch--cross-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%239a86a8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-pink:checked), .bg-swatch--cross-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c98d96' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-teal:checked), .bg-swatch--cross-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%237aa8a1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-mono:checked), .bg-swatch--cross-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23a8a29a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-smoky-black:checked), .bg-swatch--cross-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%233a3d3f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  /* ---------- ステッチ（くすみ10色） ---------- */

  body:has(#bg-stitch-smoky-green:checked), .bg-swatch--stitch-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%238ba888' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-yellow:checked), .bg-swatch--stitch-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c9a84c' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-red:checked), .bg-swatch--stitch-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c07059' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-blue:checked), .bg-swatch--stitch-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%236b87a8' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-orange:checked), .bg-swatch--stitch-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c68a5a' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-purple:checked), .bg-swatch--stitch-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%239a86a8' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-pink:checked), .bg-swatch--stitch-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c98d96' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-teal:checked), .bg-swatch--stitch-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%237aa8a1' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-mono:checked), .bg-swatch--stitch-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23a8a29a' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-smoky-black:checked), .bg-swatch--stitch-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%233a3d3f' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  /* ---------- 紙のグレイン（くすみ10色） ---------- */

  body:has(#bg-grain-smoky-green:checked), .bg-swatch--grain-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.545 0 0 0 0 0.659 0 0 0 0 0.533 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-yellow:checked), .bg-swatch--grain-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.788 0 0 0 0 0.659 0 0 0 0 0.298 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-red:checked), .bg-swatch--grain-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.753 0 0 0 0 0.439 0 0 0 0 0.349 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-blue:checked), .bg-swatch--grain-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.420 0 0 0 0 0.529 0 0 0 0 0.659 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-orange:checked), .bg-swatch--grain-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.776 0 0 0 0 0.541 0 0 0 0 0.353 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-purple:checked), .bg-swatch--grain-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.604 0 0 0 0 0.525 0 0 0 0 0.659 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-pink:checked), .bg-swatch--grain-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.788 0 0 0 0 0.553 0 0 0 0 0.588 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-teal:checked), .bg-swatch--grain-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.478 0 0 0 0 0.659 0 0 0 0 0.631 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-mono:checked), .bg-swatch--grain-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.659 0 0 0 0 0.635 0 0 0 0 0.604 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-smoky-black:checked), .bg-swatch--grain-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.227 0 0 0 0 0.239 0 0 0 0 0.247 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  /* ---------- 回路基板（くすみ10色） ---------- */

  body:has(#bg-circuit-smoky-green:checked), .bg-swatch--circuit-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%238ba888' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%238ba888'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-yellow:checked), .bg-swatch--circuit-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c9a84c' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c9a84c'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-red:checked), .bg-swatch--circuit-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c07059' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c07059'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-blue:checked), .bg-swatch--circuit-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%236b87a8' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%236b87a8'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-orange:checked), .bg-swatch--circuit-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c68a5a' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c68a5a'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-purple:checked), .bg-swatch--circuit-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%239a86a8' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%239a86a8'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-pink:checked), .bg-swatch--circuit-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c98d96' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c98d96'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-teal:checked), .bg-swatch--circuit-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%237aa8a1' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%237aa8a1'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-mono:checked), .bg-swatch--circuit-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23a8a29a' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23a8a29a'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-smoky-black:checked), .bg-swatch--circuit-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%233a3d3f' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%233a3d3f'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  /* ---------- コンクリート追加カラー5種 ---------- */

  body:has(#bg-pat-concrete-cool:checked), .bg-swatch--pat-concrete-cool {
    background-color: #c5cbd1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.118 0 0 0 0 0.133 0 0 0 0 0.157 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  body:has(#bg-pat-concrete-sage:checked), .bg-swatch--pat-concrete-sage {
    background-color: #c7cbc0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.125 0 0 0 0 0.149 0 0 0 0 0.118 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  body:has(#bg-pat-concrete-terracotta:checked), .bg-swatch--pat-concrete-terracotta {
    background-color: #d3c3ba;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.176 0 0 0 0 0.125 0 0 0 0 0.110 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  body:has(#bg-pat-concrete-charcoal:checked), .bg-swatch--pat-concrete-charcoal {
    background-color: #4d4f52;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.353 0 0 0 0 0.361 0 0 0 0 0.376 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  body:has(#bg-pat-concrete-sand:checked), .bg-swatch--pat-concrete-sand {
    background-color: #d6cdb8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.227 0 0 0 0 0.188 0 0 0 0 0.125 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  /* ---------- ダイヤモンドチェック（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-houndstooth-green:checked), .bg-swatch--houndstooth-green {
    background-color: #f6faf1;
    background-image:
      linear-gradient(45deg, rgb(111, 174, 47) 25%, transparent 25%, transparent 75%, rgb(111, 174, 47) 75%, rgb(111, 174, 47)),
      linear-gradient(45deg, rgb(111, 174, 47) 25%, transparent 25%, transparent 75%, rgb(111, 174, 47) 75%, rgb(111, 174, 47)),
      linear-gradient(-45deg, rgb(111, 174, 47) 25%, #f6faf1 25%, #f6faf1 75%, rgb(111, 174, 47) 75%, rgb(111, 174, 47));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-yellow:checked), .bg-swatch--houndstooth-yellow {
    background-color: #fffbf0;
    background-image:
      linear-gradient(45deg, rgb(242, 183, 5) 25%, transparent 25%, transparent 75%, rgb(242, 183, 5) 75%, rgb(242, 183, 5)),
      linear-gradient(45deg, rgb(242, 183, 5) 25%, transparent 25%, transparent 75%, rgb(242, 183, 5) 75%, rgb(242, 183, 5)),
      linear-gradient(-45deg, rgb(242, 183, 5) 25%, #fffbf0 25%, #fffbf0 75%, rgb(242, 183, 5) 75%, rgb(242, 183, 5));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-red:checked), .bg-swatch--houndstooth-red {
    background-color: #fff5f5;
    background-image:
      linear-gradient(45deg, rgb(229, 56, 59) 25%, transparent 25%, transparent 75%, rgb(229, 56, 59) 75%, rgb(229, 56, 59)),
      linear-gradient(45deg, rgb(229, 56, 59) 25%, transparent 25%, transparent 75%, rgb(229, 56, 59) 75%, rgb(229, 56, 59)),
      linear-gradient(-45deg, rgb(229, 56, 59) 25%, #fff5f5 25%, #fff5f5 75%, rgb(229, 56, 59) 75%, rgb(229, 56, 59));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-blue:checked), .bg-swatch--houndstooth-blue {
    background-color: #f0f5ff;
    background-image:
      linear-gradient(45deg, rgb(34, 85, 209) 25%, transparent 25%, transparent 75%, rgb(34, 85, 209) 75%, rgb(34, 85, 209)),
      linear-gradient(45deg, rgb(34, 85, 209) 25%, transparent 25%, transparent 75%, rgb(34, 85, 209) 75%, rgb(34, 85, 209)),
      linear-gradient(-45deg, rgb(34, 85, 209) 25%, #f0f5ff 25%, #f0f5ff 75%, rgb(34, 85, 209) 75%, rgb(34, 85, 209));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-orange:checked), .bg-swatch--houndstooth-orange {
    background-color: #fff4ec;
    background-image:
      linear-gradient(45deg, rgb(232, 114, 12) 25%, transparent 25%, transparent 75%, rgb(232, 114, 12) 75%, rgb(232, 114, 12)),
      linear-gradient(45deg, rgb(232, 114, 12) 25%, transparent 25%, transparent 75%, rgb(232, 114, 12) 75%, rgb(232, 114, 12)),
      linear-gradient(-45deg, rgb(232, 114, 12) 25%, #fff4ec 25%, #fff4ec 75%, rgb(232, 114, 12) 75%, rgb(232, 114, 12));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-purple:checked), .bg-swatch--houndstooth-purple {
    background-color: #f7f0fc;
    background-image:
      linear-gradient(45deg, rgb(124, 58, 237) 25%, transparent 25%, transparent 75%, rgb(124, 58, 237) 75%, rgb(124, 58, 237)),
      linear-gradient(45deg, rgb(124, 58, 237) 25%, transparent 25%, transparent 75%, rgb(124, 58, 237) 75%, rgb(124, 58, 237)),
      linear-gradient(-45deg, rgb(124, 58, 237) 25%, #f7f0fc 25%, #f7f0fc 75%, rgb(124, 58, 237) 75%, rgb(124, 58, 237));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pink:checked), .bg-swatch--houndstooth-pink {
    background-color: #fdf0f7;
    background-image:
      linear-gradient(45deg, rgb(232, 54, 143) 25%, transparent 25%, transparent 75%, rgb(232, 54, 143) 75%, rgb(232, 54, 143)),
      linear-gradient(45deg, rgb(232, 54, 143) 25%, transparent 25%, transparent 75%, rgb(232, 54, 143) 75%, rgb(232, 54, 143)),
      linear-gradient(-45deg, rgb(232, 54, 143) 25%, #fdf0f7 25%, #fdf0f7 75%, rgb(232, 54, 143) 75%, rgb(232, 54, 143));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-teal:checked), .bg-swatch--houndstooth-teal {
    background-color: #eafbfd;
    background-image:
      linear-gradient(45deg, rgb(18, 182, 201) 25%, transparent 25%, transparent 75%, rgb(18, 182, 201) 75%, rgb(18, 182, 201)),
      linear-gradient(45deg, rgb(18, 182, 201) 25%, transparent 25%, transparent 75%, rgb(18, 182, 201) 75%, rgb(18, 182, 201)),
      linear-gradient(-45deg, rgb(18, 182, 201) 25%, #eafbfd 25%, #eafbfd 75%, rgb(18, 182, 201) 75%, rgb(18, 182, 201));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-mono:checked), .bg-swatch--houndstooth-mono {
    background-color: #f5f5f4;
    background-image:
      linear-gradient(45deg, rgb(107, 114, 128) 25%, transparent 25%, transparent 75%, rgb(107, 114, 128) 75%, rgb(107, 114, 128)),
      linear-gradient(45deg, rgb(107, 114, 128) 25%, transparent 25%, transparent 75%, rgb(107, 114, 128) 75%, rgb(107, 114, 128)),
      linear-gradient(-45deg, rgb(107, 114, 128) 25%, #f5f5f4 25%, #f5f5f4 75%, rgb(107, 114, 128) 75%, rgb(107, 114, 128));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-black:checked), .bg-swatch--houndstooth-black {
    background-color: #fafafa;
    background-image:
      linear-gradient(45deg, rgb(20, 22, 26) 25%, transparent 25%, transparent 75%, rgb(20, 22, 26) 75%, rgb(20, 22, 26)),
      linear-gradient(45deg, rgb(20, 22, 26) 25%, transparent 25%, transparent 75%, rgb(20, 22, 26) 75%, rgb(20, 22, 26)),
      linear-gradient(-45deg, rgb(20, 22, 26) 25%, #fafafa 25%, #fafafa 75%, rgb(20, 22, 26) 75%, rgb(20, 22, 26));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-green:checked), .bg-swatch--houndstooth-smoky-green {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(139, 168, 136) 25%, transparent 25%, transparent 75%, rgb(139, 168, 136) 75%, rgb(139, 168, 136)),
      linear-gradient(45deg, rgb(139, 168, 136) 25%, transparent 25%, transparent 75%, rgb(139, 168, 136) 75%, rgb(139, 168, 136)),
      linear-gradient(-45deg, rgb(139, 168, 136) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(139, 168, 136) 75%, rgb(139, 168, 136));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-yellow:checked), .bg-swatch--houndstooth-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(201, 168, 76) 25%, transparent 25%, transparent 75%, rgb(201, 168, 76) 75%, rgb(201, 168, 76)),
      linear-gradient(45deg, rgb(201, 168, 76) 25%, transparent 25%, transparent 75%, rgb(201, 168, 76) 75%, rgb(201, 168, 76)),
      linear-gradient(-45deg, rgb(201, 168, 76) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(201, 168, 76) 75%, rgb(201, 168, 76));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-red:checked), .bg-swatch--houndstooth-smoky-red {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(192, 112, 89) 25%, transparent 25%, transparent 75%, rgb(192, 112, 89) 75%, rgb(192, 112, 89)),
      linear-gradient(45deg, rgb(192, 112, 89) 25%, transparent 25%, transparent 75%, rgb(192, 112, 89) 75%, rgb(192, 112, 89)),
      linear-gradient(-45deg, rgb(192, 112, 89) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(192, 112, 89) 75%, rgb(192, 112, 89));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-blue:checked), .bg-swatch--houndstooth-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(107, 135, 168) 25%, transparent 25%, transparent 75%, rgb(107, 135, 168) 75%, rgb(107, 135, 168)),
      linear-gradient(45deg, rgb(107, 135, 168) 25%, transparent 25%, transparent 75%, rgb(107, 135, 168) 75%, rgb(107, 135, 168)),
      linear-gradient(-45deg, rgb(107, 135, 168) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(107, 135, 168) 75%, rgb(107, 135, 168));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-orange:checked), .bg-swatch--houndstooth-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(198, 138, 90) 25%, transparent 25%, transparent 75%, rgb(198, 138, 90) 75%, rgb(198, 138, 90)),
      linear-gradient(45deg, rgb(198, 138, 90) 25%, transparent 25%, transparent 75%, rgb(198, 138, 90) 75%, rgb(198, 138, 90)),
      linear-gradient(-45deg, rgb(198, 138, 90) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(198, 138, 90) 75%, rgb(198, 138, 90));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-purple:checked), .bg-swatch--houndstooth-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(154, 134, 168) 25%, transparent 25%, transparent 75%, rgb(154, 134, 168) 75%, rgb(154, 134, 168)),
      linear-gradient(45deg, rgb(154, 134, 168) 25%, transparent 25%, transparent 75%, rgb(154, 134, 168) 75%, rgb(154, 134, 168)),
      linear-gradient(-45deg, rgb(154, 134, 168) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(154, 134, 168) 75%, rgb(154, 134, 168));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-pink:checked), .bg-swatch--houndstooth-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(201, 141, 150) 25%, transparent 25%, transparent 75%, rgb(201, 141, 150) 75%, rgb(201, 141, 150)),
      linear-gradient(45deg, rgb(201, 141, 150) 25%, transparent 25%, transparent 75%, rgb(201, 141, 150) 75%, rgb(201, 141, 150)),
      linear-gradient(-45deg, rgb(201, 141, 150) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(201, 141, 150) 75%, rgb(201, 141, 150));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-teal:checked), .bg-swatch--houndstooth-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(122, 168, 161) 25%, transparent 25%, transparent 75%, rgb(122, 168, 161) 75%, rgb(122, 168, 161)),
      linear-gradient(45deg, rgb(122, 168, 161) 25%, transparent 25%, transparent 75%, rgb(122, 168, 161) 75%, rgb(122, 168, 161)),
      linear-gradient(-45deg, rgb(122, 168, 161) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(122, 168, 161) 75%, rgb(122, 168, 161));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-mono:checked), .bg-swatch--houndstooth-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(168, 162, 154) 25%, transparent 25%, transparent 75%, rgb(168, 162, 154) 75%, rgb(168, 162, 154)),
      linear-gradient(45deg, rgb(168, 162, 154) 25%, transparent 25%, transparent 75%, rgb(168, 162, 154) 75%, rgb(168, 162, 154)),
      linear-gradient(-45deg, rgb(168, 162, 154) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(168, 162, 154) 75%, rgb(168, 162, 154));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-smoky-black:checked), .bg-swatch--houndstooth-smoky-black {
    background-color: #f4f1ec;
    background-image:
      linear-gradient(45deg, rgb(58, 61, 63) 25%, transparent 25%, transparent 75%, rgb(58, 61, 63) 75%, rgb(58, 61, 63)),
      linear-gradient(45deg, rgb(58, 61, 63) 25%, transparent 25%, transparent 75%, rgb(58, 61, 63) 75%, rgb(58, 61, 63)),
      linear-gradient(-45deg, rgb(58, 61, 63) 25%, #f4f1ec 25%, #f4f1ec 75%, rgb(58, 61, 63) 75%, rgb(58, 61, 63));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  /* ---------- タータンチェック（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-tartan-green:checked), .bg-swatch--tartan-green {
    background-color: #f6faf1;
    background-image:
      repeating-linear-gradient(90deg, rgba(111, 174, 47, 0.28) 0 10px, transparent 10px 20px, rgba(111, 174, 47, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(111, 174, 47, 0.28) 0 10px, transparent 10px 20px, rgba(111, 174, 47, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-yellow:checked), .bg-swatch--tartan-yellow {
    background-color: #fffbf0;
    background-image:
      repeating-linear-gradient(90deg, rgba(242, 183, 5, 0.28) 0 10px, transparent 10px 20px, rgba(242, 183, 5, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(242, 183, 5, 0.28) 0 10px, transparent 10px 20px, rgba(242, 183, 5, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-red:checked), .bg-swatch--tartan-red {
    background-color: #fff5f5;
    background-image:
      repeating-linear-gradient(90deg, rgba(229, 56, 59, 0.28) 0 10px, transparent 10px 20px, rgba(229, 56, 59, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(229, 56, 59, 0.28) 0 10px, transparent 10px 20px, rgba(229, 56, 59, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-blue:checked), .bg-swatch--tartan-blue {
    background-color: #f0f5ff;
    background-image:
      repeating-linear-gradient(90deg, rgba(34, 85, 209, 0.28) 0 10px, transparent 10px 20px, rgba(34, 85, 209, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(34, 85, 209, 0.28) 0 10px, transparent 10px 20px, rgba(34, 85, 209, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-orange:checked), .bg-swatch--tartan-orange {
    background-color: #fff4ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(232, 114, 12, 0.28) 0 10px, transparent 10px 20px, rgba(232, 114, 12, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(232, 114, 12, 0.28) 0 10px, transparent 10px 20px, rgba(232, 114, 12, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-purple:checked), .bg-swatch--tartan-purple {
    background-color: #f7f0fc;
    background-image:
      repeating-linear-gradient(90deg, rgba(124, 58, 237, 0.28) 0 10px, transparent 10px 20px, rgba(124, 58, 237, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(124, 58, 237, 0.28) 0 10px, transparent 10px 20px, rgba(124, 58, 237, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pink:checked), .bg-swatch--tartan-pink {
    background-color: #fdf0f7;
    background-image:
      repeating-linear-gradient(90deg, rgba(232, 54, 143, 0.28) 0 10px, transparent 10px 20px, rgba(232, 54, 143, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(232, 54, 143, 0.28) 0 10px, transparent 10px 20px, rgba(232, 54, 143, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-teal:checked), .bg-swatch--tartan-teal {
    background-color: #eafbfd;
    background-image:
      repeating-linear-gradient(90deg, rgba(18, 182, 201, 0.28) 0 10px, transparent 10px 20px, rgba(18, 182, 201, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(18, 182, 201, 0.28) 0 10px, transparent 10px 20px, rgba(18, 182, 201, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-mono:checked), .bg-swatch--tartan-mono {
    background-color: #f5f5f4;
    background-image:
      repeating-linear-gradient(90deg, rgba(107, 114, 128, 0.28) 0 10px, transparent 10px 20px, rgba(107, 114, 128, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(107, 114, 128, 0.28) 0 10px, transparent 10px 20px, rgba(107, 114, 128, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-black:checked), .bg-swatch--tartan-black {
    background-color: #fafafa;
    background-image:
      repeating-linear-gradient(90deg, rgba(20, 22, 26, 0.28) 0 10px, transparent 10px 20px, rgba(20, 22, 26, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(20, 22, 26, 0.28) 0 10px, transparent 10px 20px, rgba(20, 22, 26, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-green:checked), .bg-swatch--tartan-smoky-green {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(139, 168, 136, 0.28) 0 10px, transparent 10px 20px, rgba(139, 168, 136, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(139, 168, 136, 0.28) 0 10px, transparent 10px 20px, rgba(139, 168, 136, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-yellow:checked), .bg-swatch--tartan-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 168, 76, 0.28) 0 10px, transparent 10px 20px, rgba(201, 168, 76, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(201, 168, 76, 0.28) 0 10px, transparent 10px 20px, rgba(201, 168, 76, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-red:checked), .bg-swatch--tartan-smoky-red {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(192, 112, 89, 0.28) 0 10px, transparent 10px 20px, rgba(192, 112, 89, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(192, 112, 89, 0.28) 0 10px, transparent 10px 20px, rgba(192, 112, 89, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-blue:checked), .bg-swatch--tartan-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(107, 135, 168, 0.28) 0 10px, transparent 10px 20px, rgba(107, 135, 168, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(107, 135, 168, 0.28) 0 10px, transparent 10px 20px, rgba(107, 135, 168, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-orange:checked), .bg-swatch--tartan-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(198, 138, 90, 0.28) 0 10px, transparent 10px 20px, rgba(198, 138, 90, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(198, 138, 90, 0.28) 0 10px, transparent 10px 20px, rgba(198, 138, 90, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-purple:checked), .bg-swatch--tartan-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(154, 134, 168, 0.28) 0 10px, transparent 10px 20px, rgba(154, 134, 168, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(154, 134, 168, 0.28) 0 10px, transparent 10px 20px, rgba(154, 134, 168, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-pink:checked), .bg-swatch--tartan-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 141, 150, 0.28) 0 10px, transparent 10px 20px, rgba(201, 141, 150, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(201, 141, 150, 0.28) 0 10px, transparent 10px 20px, rgba(201, 141, 150, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-teal:checked), .bg-swatch--tartan-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(122, 168, 161, 0.28) 0 10px, transparent 10px 20px, rgba(122, 168, 161, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(122, 168, 161, 0.28) 0 10px, transparent 10px 20px, rgba(122, 168, 161, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-mono:checked), .bg-swatch--tartan-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 162, 154, 0.28) 0 10px, transparent 10px 20px, rgba(168, 162, 154, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(168, 162, 154, 0.28) 0 10px, transparent 10px 20px, rgba(168, 162, 154, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-smoky-black:checked), .bg-swatch--tartan-smoky-black {
    background-color: #f4f1ec;
    background-image:
      repeating-linear-gradient(90deg, rgba(58, 61, 63, 0.28) 0 10px, transparent 10px 20px, rgba(58, 61, 63, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(58, 61, 63, 0.28) 0 10px, transparent 10px 20px, rgba(58, 61, 63, 0.16) 20px 24px, transparent 24px 44px);
  }

  /* ---------- デニム風（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-denim-green:checked), .bg-swatch--denim-green {
    background-color: #f6faf1;
    background-image: repeating-linear-gradient(45deg, rgba(111, 174, 47, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-yellow:checked), .bg-swatch--denim-yellow {
    background-color: #fffbf0;
    background-image: repeating-linear-gradient(45deg, rgba(242, 183, 5, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-red:checked), .bg-swatch--denim-red {
    background-color: #fff5f5;
    background-image: repeating-linear-gradient(45deg, rgba(229, 56, 59, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-blue:checked), .bg-swatch--denim-blue {
    background-color: #f0f5ff;
    background-image: repeating-linear-gradient(45deg, rgba(34, 85, 209, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-orange:checked), .bg-swatch--denim-orange {
    background-color: #fff4ec;
    background-image: repeating-linear-gradient(45deg, rgba(232, 114, 12, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-purple:checked), .bg-swatch--denim-purple {
    background-color: #f7f0fc;
    background-image: repeating-linear-gradient(45deg, rgba(124, 58, 237, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pink:checked), .bg-swatch--denim-pink {
    background-color: #fdf0f7;
    background-image: repeating-linear-gradient(45deg, rgba(232, 54, 143, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-teal:checked), .bg-swatch--denim-teal {
    background-color: #eafbfd;
    background-image: repeating-linear-gradient(45deg, rgba(18, 182, 201, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-mono:checked), .bg-swatch--denim-mono {
    background-color: #f5f5f4;
    background-image: repeating-linear-gradient(45deg, rgba(107, 114, 128, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-black:checked), .bg-swatch--denim-black {
    background-color: #fafafa;
    background-image: repeating-linear-gradient(45deg, rgba(20, 22, 26, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-green:checked), .bg-swatch--denim-smoky-green {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(139, 168, 136, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-yellow:checked), .bg-swatch--denim-smoky-yellow {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(201, 168, 76, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-red:checked), .bg-swatch--denim-smoky-red {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(192, 112, 89, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-blue:checked), .bg-swatch--denim-smoky-blue {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(107, 135, 168, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-orange:checked), .bg-swatch--denim-smoky-orange {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(198, 138, 90, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-purple:checked), .bg-swatch--denim-smoky-purple {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(154, 134, 168, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-pink:checked), .bg-swatch--denim-smoky-pink {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(201, 141, 150, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-teal:checked), .bg-swatch--denim-smoky-teal {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(122, 168, 161, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-mono:checked), .bg-swatch--denim-smoky-mono {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(168, 162, 154, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-smoky-black:checked), .bg-swatch--denim-smoky-black {
    background-color: #f4f1ec;
    background-image: repeating-linear-gradient(45deg, rgba(58, 61, 63, 0.35) 0 2px, transparent 2px 5px);
  }

  /* ---------- アニマル柄（ビビッド10色＋くすみ10色） ---------- */

  /* ---------- 青海波（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-seigaiha-green:checked), .bg-swatch--seigaiha-green {
    background-color: #f6faf1;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f6faf1'/><g fill='none' stroke='%236fae2f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236fae2f'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f6faf1'/><g fill='none' stroke='%236fae2f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236fae2f'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-yellow:checked), .bg-swatch--seigaiha-yellow {
    background-color: #fffbf0;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fffbf0'/><g fill='none' stroke='%23f2b705' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f2b705'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fffbf0'/><g fill='none' stroke='%23f2b705' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f2b705'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-red:checked), .bg-swatch--seigaiha-red {
    background-color: #fff5f5;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fff5f5'/><g fill='none' stroke='%23e5383b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e5383b'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fff5f5'/><g fill='none' stroke='%23e5383b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e5383b'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-blue:checked), .bg-swatch--seigaiha-blue {
    background-color: #f0f5ff;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f0f5ff'/><g fill='none' stroke='%232255d1' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%232255d1'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f0f5ff'/><g fill='none' stroke='%232255d1' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%232255d1'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-orange:checked), .bg-swatch--seigaiha-orange {
    background-color: #fff4ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fff4ec'/><g fill='none' stroke='%23e8720c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e8720c'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fff4ec'/><g fill='none' stroke='%23e8720c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e8720c'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-purple:checked), .bg-swatch--seigaiha-purple {
    background-color: #f7f0fc;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f7f0fc'/><g fill='none' stroke='%237c3aed' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%237c3aed'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f7f0fc'/><g fill='none' stroke='%237c3aed' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%237c3aed'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pink:checked), .bg-swatch--seigaiha-pink {
    background-color: #fdf0f7;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdf0f7'/><g fill='none' stroke='%23e8368f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e8368f'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdf0f7'/><g fill='none' stroke='%23e8368f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23e8368f'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-teal:checked), .bg-swatch--seigaiha-teal {
    background-color: #eafbfd;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23eafbfd'/><g fill='none' stroke='%2312b6c9' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2312b6c9'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23eafbfd'/><g fill='none' stroke='%2312b6c9' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2312b6c9'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-mono:checked), .bg-swatch--seigaiha-mono {
    background-color: #f5f5f4;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f5f5f4'/><g fill='none' stroke='%236b7280' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236b7280'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f5f5f4'/><g fill='none' stroke='%236b7280' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236b7280'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-black:checked), .bg-swatch--seigaiha-black {
    background-color: #fafafa;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fafafa'/><g fill='none' stroke='%2314161a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2314161a'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fafafa'/><g fill='none' stroke='%2314161a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2314161a'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-green:checked), .bg-swatch--seigaiha-smoky-green {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%238ba888' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%238ba888'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%238ba888' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%238ba888'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-yellow:checked), .bg-swatch--seigaiha-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c9a84c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9a84c'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c9a84c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9a84c'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-red:checked), .bg-swatch--seigaiha-smoky-red {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c07059' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c07059'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c07059' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c07059'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-blue:checked), .bg-swatch--seigaiha-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%236b87a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236b87a8'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%236b87a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%236b87a8'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-orange:checked), .bg-swatch--seigaiha-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c68a5a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c68a5a'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c68a5a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c68a5a'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-purple:checked), .bg-swatch--seigaiha-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%239a86a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%239a86a8'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%239a86a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%239a86a8'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-pink:checked), .bg-swatch--seigaiha-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c98d96' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c98d96'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23c98d96' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c98d96'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-teal:checked), .bg-swatch--seigaiha-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%237aa8a1' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%237aa8a1'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%237aa8a1' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%237aa8a1'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-mono:checked), .bg-swatch--seigaiha-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23a8a29a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8a29a'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%23a8a29a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8a29a'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-smoky-black:checked), .bg-swatch--seigaiha-smoky-black {
    background-color: #f4f1ec;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%233a3d3f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%233a3d3f'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23f4f1ec'/><g fill='none' stroke='%233a3d3f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%233a3d3f'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  /* ---------- 鱗文様（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-uroko-green:checked), .bg-swatch--uroko-green {
    background-color: #f6faf1;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(111, 174, 47) 13px, rgb(111, 174, 47) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(111, 174, 47) 13px, rgb(111, 174, 47) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-yellow:checked), .bg-swatch--uroko-yellow {
    background-color: #fffbf0;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(242, 183, 5) 13px, rgb(242, 183, 5) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(242, 183, 5) 13px, rgb(242, 183, 5) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-red:checked), .bg-swatch--uroko-red {
    background-color: #fff5f5;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(229, 56, 59) 13px, rgb(229, 56, 59) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(229, 56, 59) 13px, rgb(229, 56, 59) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-blue:checked), .bg-swatch--uroko-blue {
    background-color: #f0f5ff;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(34, 85, 209) 13px, rgb(34, 85, 209) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(34, 85, 209) 13px, rgb(34, 85, 209) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-orange:checked), .bg-swatch--uroko-orange {
    background-color: #fff4ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(232, 114, 12) 13px, rgb(232, 114, 12) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(232, 114, 12) 13px, rgb(232, 114, 12) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-purple:checked), .bg-swatch--uroko-purple {
    background-color: #f7f0fc;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(124, 58, 237) 13px, rgb(124, 58, 237) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(124, 58, 237) 13px, rgb(124, 58, 237) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pink:checked), .bg-swatch--uroko-pink {
    background-color: #fdf0f7;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(232, 54, 143) 13px, rgb(232, 54, 143) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(232, 54, 143) 13px, rgb(232, 54, 143) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-teal:checked), .bg-swatch--uroko-teal {
    background-color: #eafbfd;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(18, 182, 201) 13px, rgb(18, 182, 201) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(18, 182, 201) 13px, rgb(18, 182, 201) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-mono:checked), .bg-swatch--uroko-mono {
    background-color: #f5f5f4;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(107, 114, 128) 13px, rgb(107, 114, 128) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(107, 114, 128) 13px, rgb(107, 114, 128) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-black:checked), .bg-swatch--uroko-black {
    background-color: #fafafa;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(20, 22, 26) 13px, rgb(20, 22, 26) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(20, 22, 26) 13px, rgb(20, 22, 26) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-green:checked), .bg-swatch--uroko-smoky-green {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(139, 168, 136) 13px, rgb(139, 168, 136) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(139, 168, 136) 13px, rgb(139, 168, 136) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-yellow:checked), .bg-swatch--uroko-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 168, 76) 13px, rgb(201, 168, 76) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 168, 76) 13px, rgb(201, 168, 76) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-red:checked), .bg-swatch--uroko-smoky-red {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(192, 112, 89) 13px, rgb(192, 112, 89) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(192, 112, 89) 13px, rgb(192, 112, 89) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-blue:checked), .bg-swatch--uroko-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(107, 135, 168) 13px, rgb(107, 135, 168) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(107, 135, 168) 13px, rgb(107, 135, 168) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-orange:checked), .bg-swatch--uroko-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(198, 138, 90) 13px, rgb(198, 138, 90) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(198, 138, 90) 13px, rgb(198, 138, 90) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-purple:checked), .bg-swatch--uroko-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(154, 134, 168) 13px, rgb(154, 134, 168) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(154, 134, 168) 13px, rgb(154, 134, 168) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-pink:checked), .bg-swatch--uroko-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 141, 150) 13px, rgb(201, 141, 150) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 141, 150) 13px, rgb(201, 141, 150) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-teal:checked), .bg-swatch--uroko-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(122, 168, 161) 13px, rgb(122, 168, 161) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(122, 168, 161) 13px, rgb(122, 168, 161) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-mono:checked), .bg-swatch--uroko-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 162, 154) 13px, rgb(168, 162, 154) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 162, 154) 13px, rgb(168, 162, 154) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-smoky-black:checked), .bg-swatch--uroko-smoky-black {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(58, 61, 63) 13px, rgb(58, 61, 63) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(58, 61, 63) 13px, rgb(58, 61, 63) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  /* ---------- 七宝繋ぎ（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-shippou-green:checked), .bg-swatch--shippou-green {
    background-color: #f6faf1;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(111, 174, 47) 17px, rgb(111, 174, 47) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(111, 174, 47) 17px, rgb(111, 174, 47) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-yellow:checked), .bg-swatch--shippou-yellow {
    background-color: #fffbf0;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(242, 183, 5) 17px, rgb(242, 183, 5) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(242, 183, 5) 17px, rgb(242, 183, 5) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-red:checked), .bg-swatch--shippou-red {
    background-color: #fff5f5;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(229, 56, 59) 17px, rgb(229, 56, 59) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(229, 56, 59) 17px, rgb(229, 56, 59) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-blue:checked), .bg-swatch--shippou-blue {
    background-color: #f0f5ff;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(34, 85, 209) 17px, rgb(34, 85, 209) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(34, 85, 209) 17px, rgb(34, 85, 209) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-orange:checked), .bg-swatch--shippou-orange {
    background-color: #fff4ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(232, 114, 12) 17px, rgb(232, 114, 12) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(232, 114, 12) 17px, rgb(232, 114, 12) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-purple:checked), .bg-swatch--shippou-purple {
    background-color: #f7f0fc;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(124, 58, 237) 17px, rgb(124, 58, 237) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(124, 58, 237) 17px, rgb(124, 58, 237) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pink:checked), .bg-swatch--shippou-pink {
    background-color: #fdf0f7;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(232, 54, 143) 17px, rgb(232, 54, 143) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(232, 54, 143) 17px, rgb(232, 54, 143) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-teal:checked), .bg-swatch--shippou-teal {
    background-color: #eafbfd;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(18, 182, 201) 17px, rgb(18, 182, 201) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(18, 182, 201) 17px, rgb(18, 182, 201) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-mono:checked), .bg-swatch--shippou-mono {
    background-color: #f5f5f4;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(107, 114, 128) 17px, rgb(107, 114, 128) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(107, 114, 128) 17px, rgb(107, 114, 128) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-black:checked), .bg-swatch--shippou-black {
    background-color: #fafafa;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(20, 22, 26) 17px, rgb(20, 22, 26) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(20, 22, 26) 17px, rgb(20, 22, 26) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-green:checked), .bg-swatch--shippou-smoky-green {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(139, 168, 136) 17px, rgb(139, 168, 136) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(139, 168, 136) 17px, rgb(139, 168, 136) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-yellow:checked), .bg-swatch--shippou-smoky-yellow {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 168, 76) 17px, rgb(201, 168, 76) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 168, 76) 17px, rgb(201, 168, 76) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-red:checked), .bg-swatch--shippou-smoky-red {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(192, 112, 89) 17px, rgb(192, 112, 89) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(192, 112, 89) 17px, rgb(192, 112, 89) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-blue:checked), .bg-swatch--shippou-smoky-blue {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(107, 135, 168) 17px, rgb(107, 135, 168) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(107, 135, 168) 17px, rgb(107, 135, 168) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-orange:checked), .bg-swatch--shippou-smoky-orange {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(198, 138, 90) 17px, rgb(198, 138, 90) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(198, 138, 90) 17px, rgb(198, 138, 90) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-purple:checked), .bg-swatch--shippou-smoky-purple {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(154, 134, 168) 17px, rgb(154, 134, 168) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(154, 134, 168) 17px, rgb(154, 134, 168) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-pink:checked), .bg-swatch--shippou-smoky-pink {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 141, 150) 17px, rgb(201, 141, 150) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 141, 150) 17px, rgb(201, 141, 150) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-teal:checked), .bg-swatch--shippou-smoky-teal {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(122, 168, 161) 17px, rgb(122, 168, 161) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(122, 168, 161) 17px, rgb(122, 168, 161) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-mono:checked), .bg-swatch--shippou-smoky-mono {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 162, 154) 17px, rgb(168, 162, 154) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 162, 154) 17px, rgb(168, 162, 154) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-smoky-black:checked), .bg-swatch--shippou-smoky-black {
    background-color: #f4f1ec;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(58, 61, 63) 17px, rgb(58, 61, 63) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(58, 61, 63) 17px, rgb(58, 61, 63) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  /* ---------- ピンホイール（ビビッド10色＋くすみ10色） ---------- */

  body:has(#bg-pinwheel-green:checked), .bg-swatch--pinwheel-green {
    background-color: #f6faf1;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(111, 174, 47, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(111, 174, 47, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(111, 174, 47, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(111, 174, 47, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-yellow:checked), .bg-swatch--pinwheel-yellow {
    background-color: #fffbf0;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(242, 183, 5, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(242, 183, 5, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(242, 183, 5, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(242, 183, 5, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-red:checked), .bg-swatch--pinwheel-red {
    background-color: #fff5f5;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(229, 56, 59, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(229, 56, 59, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(229, 56, 59, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(229, 56, 59, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-blue:checked), .bg-swatch--pinwheel-blue {
    background-color: #f0f5ff;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(34, 85, 209, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(34, 85, 209, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(34, 85, 209, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(34, 85, 209, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-orange:checked), .bg-swatch--pinwheel-orange {
    background-color: #fff4ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(232, 114, 12, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(232, 114, 12, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(232, 114, 12, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(232, 114, 12, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-purple:checked), .bg-swatch--pinwheel-purple {
    background-color: #f7f0fc;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(124, 58, 237, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(124, 58, 237, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(124, 58, 237, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(124, 58, 237, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pink:checked), .bg-swatch--pinwheel-pink {
    background-color: #fdf0f7;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(232, 54, 143, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(232, 54, 143, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(232, 54, 143, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(232, 54, 143, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-teal:checked), .bg-swatch--pinwheel-teal {
    background-color: #eafbfd;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(18, 182, 201, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(18, 182, 201, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(18, 182, 201, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(18, 182, 201, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-mono:checked), .bg-swatch--pinwheel-mono {
    background-color: #f5f5f4;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(107, 114, 128, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(107, 114, 128, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(107, 114, 128, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(107, 114, 128, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-black:checked), .bg-swatch--pinwheel-black {
    background-color: #fafafa;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(20, 22, 26, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(20, 22, 26, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(20, 22, 26, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(20, 22, 26, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-green:checked), .bg-swatch--pinwheel-smoky-green {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(139, 168, 136, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(139, 168, 136, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(139, 168, 136, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(139, 168, 136, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-yellow:checked), .bg-swatch--pinwheel-smoky-yellow {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(201, 168, 76, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(201, 168, 76, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(201, 168, 76, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(201, 168, 76, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-red:checked), .bg-swatch--pinwheel-smoky-red {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(192, 112, 89, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(192, 112, 89, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(192, 112, 89, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(192, 112, 89, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-blue:checked), .bg-swatch--pinwheel-smoky-blue {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(107, 135, 168, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(107, 135, 168, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(107, 135, 168, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(107, 135, 168, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-orange:checked), .bg-swatch--pinwheel-smoky-orange {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(198, 138, 90, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(198, 138, 90, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(198, 138, 90, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(198, 138, 90, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-purple:checked), .bg-swatch--pinwheel-smoky-purple {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(154, 134, 168, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(154, 134, 168, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(154, 134, 168, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(154, 134, 168, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-pink:checked), .bg-swatch--pinwheel-smoky-pink {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(201, 141, 150, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(201, 141, 150, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(201, 141, 150, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(201, 141, 150, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-teal:checked), .bg-swatch--pinwheel-smoky-teal {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(122, 168, 161, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(122, 168, 161, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(122, 168, 161, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(122, 168, 161, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-mono:checked), .bg-swatch--pinwheel-smoky-mono {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(168, 162, 154, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(168, 162, 154, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(168, 162, 154, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(168, 162, 154, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-smoky-black:checked), .bg-swatch--pinwheel-smoky-black {
    background-color: #f4f1ec;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(58, 61, 63, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(58, 61, 63, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(58, 61, 63, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(58, 61, 63, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  /* ---------- ドット（あわい10色） ---------- */

  body:has(#bg-dots-pastel-green:checked), .bg-swatch--dots-pastel-green {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(181, 224, 168, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-yellow:checked), .bg-swatch--dots-pastel-yellow {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(247, 227, 155, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-red:checked), .bg-swatch--dots-pastel-red {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(244, 169, 163, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-blue:checked), .bg-swatch--dots-pastel-blue {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(168, 200, 240, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-orange:checked), .bg-swatch--dots-pastel-orange {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(248, 200, 154, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-purple:checked), .bg-swatch--dots-pastel-purple {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(201, 184, 236, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-pink:checked), .bg-swatch--dots-pastel-pink {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(247, 197, 218, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-teal:checked), .bg-swatch--dots-pastel-teal {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(169, 226, 216, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-mono:checked), .bg-swatch--dots-pastel-mono {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(201, 205, 212, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-pastel-black:checked), .bg-swatch--dots-pastel-black {
    background-color: #fdfbf6;
    background-image: radial-gradient(circle, rgba(74, 79, 90, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  /* ---------- ドット（宝石10色） ---------- */

  body:has(#bg-dots-jewel-green:checked), .bg-swatch--dots-jewel-green {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(14, 122, 95, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-yellow:checked), .bg-swatch--dots-jewel-yellow {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(184, 134, 11, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-red:checked), .bg-swatch--dots-jewel-red {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(155, 27, 60, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-blue:checked), .bg-swatch--dots-jewel-blue {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(30, 63, 143, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-orange:checked), .bg-swatch--dots-jewel-orange {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(180, 83, 23, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-purple:checked), .bg-swatch--dots-jewel-purple {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(91, 45, 142, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-pink:checked), .bg-swatch--dots-jewel-pink {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(168, 51, 110, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-teal:checked), .bg-swatch--dots-jewel-teal {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(14, 110, 140, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-mono:checked), .bg-swatch--dots-jewel-mono {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(120, 128, 140, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-dots-jewel-black:checked), .bg-swatch--dots-jewel-black {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(70, 75, 85, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  /* ---------- ストライプ（あわい10色） ---------- */

  body:has(#bg-stripe-pastel-green:checked), .bg-swatch--stripe-pastel-green {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(181, 224, 168, 0.18) 0px, rgba(181, 224, 168, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-yellow:checked), .bg-swatch--stripe-pastel-yellow {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(247, 227, 155, 0.18) 0px, rgba(247, 227, 155, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-red:checked), .bg-swatch--stripe-pastel-red {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(244, 169, 163, 0.18) 0px, rgba(244, 169, 163, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-blue:checked), .bg-swatch--stripe-pastel-blue {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(168, 200, 240, 0.18) 0px, rgba(168, 200, 240, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-orange:checked), .bg-swatch--stripe-pastel-orange {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(248, 200, 154, 0.18) 0px, rgba(248, 200, 154, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-purple:checked), .bg-swatch--stripe-pastel-purple {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(201, 184, 236, 0.18) 0px, rgba(201, 184, 236, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-pink:checked), .bg-swatch--stripe-pastel-pink {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(247, 197, 218, 0.18) 0px, rgba(247, 197, 218, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-teal:checked), .bg-swatch--stripe-pastel-teal {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(169, 226, 216, 0.18) 0px, rgba(169, 226, 216, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-mono:checked), .bg-swatch--stripe-pastel-mono {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(201, 205, 212, 0.18) 0px, rgba(201, 205, 212, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-pastel-black:checked), .bg-swatch--stripe-pastel-black {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(74, 79, 90, 0.18) 0px, rgba(74, 79, 90, 0.18) 10px, transparent 10px, transparent 24px);
  }

  /* ---------- ストライプ（宝石10色） ---------- */

  body:has(#bg-stripe-jewel-green:checked), .bg-swatch--stripe-jewel-green {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(14, 122, 95, 0.18) 0px, rgba(14, 122, 95, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-yellow:checked), .bg-swatch--stripe-jewel-yellow {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.18) 0px, rgba(184, 134, 11, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-red:checked), .bg-swatch--stripe-jewel-red {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(155, 27, 60, 0.18) 0px, rgba(155, 27, 60, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-blue:checked), .bg-swatch--stripe-jewel-blue {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(30, 63, 143, 0.18) 0px, rgba(30, 63, 143, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-orange:checked), .bg-swatch--stripe-jewel-orange {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(180, 83, 23, 0.18) 0px, rgba(180, 83, 23, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-purple:checked), .bg-swatch--stripe-jewel-purple {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(91, 45, 142, 0.18) 0px, rgba(91, 45, 142, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-pink:checked), .bg-swatch--stripe-jewel-pink {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(168, 51, 110, 0.18) 0px, rgba(168, 51, 110, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-teal:checked), .bg-swatch--stripe-jewel-teal {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(14, 110, 140, 0.18) 0px, rgba(14, 110, 140, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-mono:checked), .bg-swatch--stripe-jewel-mono {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(120, 128, 140, 0.18) 0px, rgba(120, 128, 140, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-stripe-jewel-black:checked), .bg-swatch--stripe-jewel-black {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(70, 75, 85, 0.18) 0px, rgba(70, 75, 85, 0.18) 10px, transparent 10px, transparent 24px);
  }

  /* ---------- グラフ用紙（あわい10色） ---------- */

  body:has(#bg-graph-pastel-green:checked), .bg-swatch--graph-pastel-green {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(181, 224, 168, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(181, 224, 168, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-yellow:checked), .bg-swatch--graph-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(247, 227, 155, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247, 227, 155, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-red:checked), .bg-swatch--graph-pastel-red {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(244, 169, 163, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(244, 169, 163, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-blue:checked), .bg-swatch--graph-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(168, 200, 240, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 200, 240, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-orange:checked), .bg-swatch--graph-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(248, 200, 154, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(248, 200, 154, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-purple:checked), .bg-swatch--graph-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(201, 184, 236, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201, 184, 236, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-pink:checked), .bg-swatch--graph-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(247, 197, 218, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(247, 197, 218, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-teal:checked), .bg-swatch--graph-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(169, 226, 216, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(169, 226, 216, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-mono:checked), .bg-swatch--graph-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(201, 205, 212, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201, 205, 212, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-pastel-black:checked), .bg-swatch--graph-pastel-black {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(rgba(74, 79, 90, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(74, 79, 90, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* ---------- グラフ用紙（宝石10色） ---------- */

  body:has(#bg-graph-jewel-green:checked), .bg-swatch--graph-jewel-green {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(14, 122, 95, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 122, 95, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-yellow:checked), .bg-swatch--graph-jewel-yellow {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(184, 134, 11, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(184, 134, 11, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-red:checked), .bg-swatch--graph-jewel-red {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(155, 27, 60, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(155, 27, 60, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-blue:checked), .bg-swatch--graph-jewel-blue {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(30, 63, 143, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 63, 143, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-orange:checked), .bg-swatch--graph-jewel-orange {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(180, 83, 23, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(180, 83, 23, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-purple:checked), .bg-swatch--graph-jewel-purple {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(91, 45, 142, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(91, 45, 142, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-pink:checked), .bg-swatch--graph-jewel-pink {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(168, 51, 110, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168, 51, 110, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-teal:checked), .bg-swatch--graph-jewel-teal {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(14, 110, 140, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14, 110, 140, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-mono:checked), .bg-swatch--graph-jewel-mono {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(120, 128, 140, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(120, 128, 140, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-graph-jewel-black:checked), .bg-swatch--graph-jewel-black {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(70, 75, 85, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(70, 75, 85, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  /* ---------- バブル（あわい10色） ---------- */

  body:has(#bg-bubbles-pastel-green:checked), .bg-swatch--bubbles-pastel-green {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(181, 224, 168, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(181, 224, 168, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(181, 224, 168, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(181, 224, 168, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(181, 224, 168, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(181, 224, 168, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-yellow:checked), .bg-swatch--bubbles-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(247, 227, 155, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(247, 227, 155, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(247, 227, 155, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(247, 227, 155, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(247, 227, 155, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(247, 227, 155, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-red:checked), .bg-swatch--bubbles-pastel-red {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(244, 169, 163, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(244, 169, 163, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(244, 169, 163, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(244, 169, 163, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(244, 169, 163, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(244, 169, 163, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-blue:checked), .bg-swatch--bubbles-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(168, 200, 240, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(168, 200, 240, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(168, 200, 240, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(168, 200, 240, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(168, 200, 240, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(168, 200, 240, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-orange:checked), .bg-swatch--bubbles-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(248, 200, 154, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(248, 200, 154, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(248, 200, 154, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(248, 200, 154, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(248, 200, 154, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(248, 200, 154, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-purple:checked), .bg-swatch--bubbles-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(201, 184, 236, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(201, 184, 236, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(201, 184, 236, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(201, 184, 236, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(201, 184, 236, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(201, 184, 236, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-pink:checked), .bg-swatch--bubbles-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(247, 197, 218, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(247, 197, 218, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(247, 197, 218, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(247, 197, 218, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(247, 197, 218, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(247, 197, 218, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-teal:checked), .bg-swatch--bubbles-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(169, 226, 216, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(169, 226, 216, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(169, 226, 216, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(169, 226, 216, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(169, 226, 216, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(169, 226, 216, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-mono:checked), .bg-swatch--bubbles-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(201, 205, 212, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(201, 205, 212, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(201, 205, 212, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(201, 205, 212, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(201, 205, 212, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(201, 205, 212, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-pastel-black:checked), .bg-swatch--bubbles-pastel-black {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(74, 79, 90, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(74, 79, 90, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(74, 79, 90, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(74, 79, 90, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(74, 79, 90, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(74, 79, 90, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  /* ---------- バブル（宝石10色） ---------- */

  body:has(#bg-bubbles-jewel-green:checked), .bg-swatch--bubbles-jewel-green {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(14, 122, 95, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(14, 122, 95, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(14, 122, 95, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(14, 122, 95, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(14, 122, 95, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(14, 122, 95, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-yellow:checked), .bg-swatch--bubbles-jewel-yellow {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(184, 134, 11, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(184, 134, 11, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(184, 134, 11, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(184, 134, 11, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(184, 134, 11, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(184, 134, 11, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-red:checked), .bg-swatch--bubbles-jewel-red {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(155, 27, 60, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(155, 27, 60, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(155, 27, 60, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(155, 27, 60, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(155, 27, 60, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(155, 27, 60, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-blue:checked), .bg-swatch--bubbles-jewel-blue {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(30, 63, 143, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(30, 63, 143, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(30, 63, 143, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(30, 63, 143, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(30, 63, 143, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(30, 63, 143, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-orange:checked), .bg-swatch--bubbles-jewel-orange {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(180, 83, 23, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(180, 83, 23, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(180, 83, 23, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(180, 83, 23, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(180, 83, 23, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(180, 83, 23, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-purple:checked), .bg-swatch--bubbles-jewel-purple {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(91, 45, 142, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(91, 45, 142, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(91, 45, 142, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(91, 45, 142, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(91, 45, 142, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(91, 45, 142, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-pink:checked), .bg-swatch--bubbles-jewel-pink {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(168, 51, 110, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(168, 51, 110, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(168, 51, 110, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(168, 51, 110, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(168, 51, 110, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(168, 51, 110, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-teal:checked), .bg-swatch--bubbles-jewel-teal {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(14, 110, 140, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(14, 110, 140, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(14, 110, 140, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(14, 110, 140, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(14, 110, 140, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(14, 110, 140, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-mono:checked), .bg-swatch--bubbles-jewel-mono {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(120, 128, 140, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(120, 128, 140, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(120, 128, 140, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(120, 128, 140, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(120, 128, 140, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(120, 128, 140, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-bubbles-jewel-black:checked), .bg-swatch--bubbles-jewel-black {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(70, 75, 85, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(70, 75, 85, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(70, 75, 85, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(70, 75, 85, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(70, 75, 85, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(70, 75, 85, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  /* ---------- アーガイル（あわい10色） ---------- */

  body:has(#bg-argyle-pastel-green:checked), .bg-swatch--argyle-pastel-green {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(181, 224, 168, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(181, 224, 168, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-yellow:checked), .bg-swatch--argyle-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(247, 227, 155, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(247, 227, 155, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-red:checked), .bg-swatch--argyle-pastel-red {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(244, 169, 163, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(244, 169, 163, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-blue:checked), .bg-swatch--argyle-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(168, 200, 240, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(168, 200, 240, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-orange:checked), .bg-swatch--argyle-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(248, 200, 154, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(248, 200, 154, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-purple:checked), .bg-swatch--argyle-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(201, 184, 236, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(201, 184, 236, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-pink:checked), .bg-swatch--argyle-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(247, 197, 218, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(247, 197, 218, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-teal:checked), .bg-swatch--argyle-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(169, 226, 216, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(169, 226, 216, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-mono:checked), .bg-swatch--argyle-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(201, 205, 212, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(201, 205, 212, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-pastel-black:checked), .bg-swatch--argyle-pastel-black {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(45deg, rgba(74, 79, 90, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(74, 79, 90, 0.2) 0 2px, transparent 2px 40px);
  }

  /* ---------- アーガイル（宝石10色） ---------- */

  body:has(#bg-argyle-jewel-green:checked), .bg-swatch--argyle-jewel-green {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(14, 122, 95, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(14, 122, 95, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-yellow:checked), .bg-swatch--argyle-jewel-yellow {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(184, 134, 11, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-red:checked), .bg-swatch--argyle-jewel-red {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(155, 27, 60, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(155, 27, 60, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-blue:checked), .bg-swatch--argyle-jewel-blue {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(30, 63, 143, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(30, 63, 143, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-orange:checked), .bg-swatch--argyle-jewel-orange {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(180, 83, 23, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(180, 83, 23, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-purple:checked), .bg-swatch--argyle-jewel-purple {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(91, 45, 142, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(91, 45, 142, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-pink:checked), .bg-swatch--argyle-jewel-pink {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(168, 51, 110, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(168, 51, 110, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-teal:checked), .bg-swatch--argyle-jewel-teal {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(14, 110, 140, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(14, 110, 140, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-mono:checked), .bg-swatch--argyle-jewel-mono {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(120, 128, 140, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(120, 128, 140, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-argyle-jewel-black:checked), .bg-swatch--argyle-jewel-black {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(70, 75, 85, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(70, 75, 85, 0.2) 0 2px, transparent 2px 40px);
  }

  /* ---------- チェッカー（あわい10色） ---------- */

  body:has(#bg-checker-pastel-green:checked), .bg-swatch--checker-pastel-green {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(181, 224, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(181, 224, 168, 0.14) 75%),
      linear-gradient(45deg, rgba(181, 224, 168, 0.14) 25%, transparent 25%, transparent 75%, rgba(181, 224, 168, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-yellow:checked), .bg-swatch--checker-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(247, 227, 155, 0.14) 25%, transparent 25%, transparent 75%, rgba(247, 227, 155, 0.14) 75%),
      linear-gradient(45deg, rgba(247, 227, 155, 0.14) 25%, transparent 25%, transparent 75%, rgba(247, 227, 155, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-red:checked), .bg-swatch--checker-pastel-red {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(244, 169, 163, 0.14) 25%, transparent 25%, transparent 75%, rgba(244, 169, 163, 0.14) 75%),
      linear-gradient(45deg, rgba(244, 169, 163, 0.14) 25%, transparent 25%, transparent 75%, rgba(244, 169, 163, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-blue:checked), .bg-swatch--checker-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(168, 200, 240, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 200, 240, 0.14) 75%),
      linear-gradient(45deg, rgba(168, 200, 240, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 200, 240, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-orange:checked), .bg-swatch--checker-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(248, 200, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(248, 200, 154, 0.14) 75%),
      linear-gradient(45deg, rgba(248, 200, 154, 0.14) 25%, transparent 25%, transparent 75%, rgba(248, 200, 154, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-purple:checked), .bg-swatch--checker-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(201, 184, 236, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 184, 236, 0.14) 75%),
      linear-gradient(45deg, rgba(201, 184, 236, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 184, 236, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-pink:checked), .bg-swatch--checker-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(247, 197, 218, 0.14) 25%, transparent 25%, transparent 75%, rgba(247, 197, 218, 0.14) 75%),
      linear-gradient(45deg, rgba(247, 197, 218, 0.14) 25%, transparent 25%, transparent 75%, rgba(247, 197, 218, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-teal:checked), .bg-swatch--checker-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(169, 226, 216, 0.14) 25%, transparent 25%, transparent 75%, rgba(169, 226, 216, 0.14) 75%),
      linear-gradient(45deg, rgba(169, 226, 216, 0.14) 25%, transparent 25%, transparent 75%, rgba(169, 226, 216, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-mono:checked), .bg-swatch--checker-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(201, 205, 212, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 205, 212, 0.14) 75%),
      linear-gradient(45deg, rgba(201, 205, 212, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 205, 212, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-pastel-black:checked), .bg-swatch--checker-pastel-black {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(74, 79, 90, 0.14) 25%, transparent 25%, transparent 75%, rgba(74, 79, 90, 0.14) 75%),
      linear-gradient(45deg, rgba(74, 79, 90, 0.14) 25%, transparent 25%, transparent 75%, rgba(74, 79, 90, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  /* ---------- チェッカー（宝石10色） ---------- */

  body:has(#bg-checker-jewel-green:checked), .bg-swatch--checker-jewel-green {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(14, 122, 95, 0.14) 25%, transparent 25%, transparent 75%, rgba(14, 122, 95, 0.14) 75%),
      linear-gradient(45deg, rgba(14, 122, 95, 0.14) 25%, transparent 25%, transparent 75%, rgba(14, 122, 95, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-yellow:checked), .bg-swatch--checker-jewel-yellow {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(184, 134, 11, 0.14) 25%, transparent 25%, transparent 75%, rgba(184, 134, 11, 0.14) 75%),
      linear-gradient(45deg, rgba(184, 134, 11, 0.14) 25%, transparent 25%, transparent 75%, rgba(184, 134, 11, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-red:checked), .bg-swatch--checker-jewel-red {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(155, 27, 60, 0.14) 25%, transparent 25%, transparent 75%, rgba(155, 27, 60, 0.14) 75%),
      linear-gradient(45deg, rgba(155, 27, 60, 0.14) 25%, transparent 25%, transparent 75%, rgba(155, 27, 60, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-blue:checked), .bg-swatch--checker-jewel-blue {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(30, 63, 143, 0.14) 25%, transparent 25%, transparent 75%, rgba(30, 63, 143, 0.14) 75%),
      linear-gradient(45deg, rgba(30, 63, 143, 0.14) 25%, transparent 25%, transparent 75%, rgba(30, 63, 143, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-orange:checked), .bg-swatch--checker-jewel-orange {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(180, 83, 23, 0.14) 25%, transparent 25%, transparent 75%, rgba(180, 83, 23, 0.14) 75%),
      linear-gradient(45deg, rgba(180, 83, 23, 0.14) 25%, transparent 25%, transparent 75%, rgba(180, 83, 23, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-purple:checked), .bg-swatch--checker-jewel-purple {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(91, 45, 142, 0.14) 25%, transparent 25%, transparent 75%, rgba(91, 45, 142, 0.14) 75%),
      linear-gradient(45deg, rgba(91, 45, 142, 0.14) 25%, transparent 25%, transparent 75%, rgba(91, 45, 142, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-pink:checked), .bg-swatch--checker-jewel-pink {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(168, 51, 110, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 51, 110, 0.14) 75%),
      linear-gradient(45deg, rgba(168, 51, 110, 0.14) 25%, transparent 25%, transparent 75%, rgba(168, 51, 110, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-teal:checked), .bg-swatch--checker-jewel-teal {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(14, 110, 140, 0.14) 25%, transparent 25%, transparent 75%, rgba(14, 110, 140, 0.14) 75%),
      linear-gradient(45deg, rgba(14, 110, 140, 0.14) 25%, transparent 25%, transparent 75%, rgba(14, 110, 140, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-mono:checked), .bg-swatch--checker-jewel-mono {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(120, 128, 140, 0.14) 25%, transparent 25%, transparent 75%, rgba(120, 128, 140, 0.14) 75%),
      linear-gradient(45deg, rgba(120, 128, 140, 0.14) 25%, transparent 25%, transparent 75%, rgba(120, 128, 140, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-checker-jewel-black:checked), .bg-swatch--checker-jewel-black {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(70, 75, 85, 0.14) 25%, transparent 25%, transparent 75%, rgba(70, 75, 85, 0.14) 75%),
      linear-gradient(45deg, rgba(70, 75, 85, 0.14) 25%, transparent 25%, transparent 75%, rgba(70, 75, 85, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  /* ---------- 等高線（あわい10色） ---------- */

  body:has(#bg-topo-pastel-green:checked), .bg-swatch--topo-pastel-green {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(181, 224, 168, 0.24) 15px, rgba(181, 224, 168, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(181, 224, 168, 0.18) 19px, rgba(181, 224, 168, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-yellow:checked), .bg-swatch--topo-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(247, 227, 155, 0.24) 15px, rgba(247, 227, 155, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(247, 227, 155, 0.18) 19px, rgba(247, 227, 155, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-red:checked), .bg-swatch--topo-pastel-red {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(244, 169, 163, 0.24) 15px, rgba(244, 169, 163, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(244, 169, 163, 0.18) 19px, rgba(244, 169, 163, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-blue:checked), .bg-swatch--topo-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(168, 200, 240, 0.24) 15px, rgba(168, 200, 240, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(168, 200, 240, 0.18) 19px, rgba(168, 200, 240, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-orange:checked), .bg-swatch--topo-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(248, 200, 154, 0.24) 15px, rgba(248, 200, 154, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(248, 200, 154, 0.18) 19px, rgba(248, 200, 154, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-purple:checked), .bg-swatch--topo-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(201, 184, 236, 0.24) 15px, rgba(201, 184, 236, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(201, 184, 236, 0.18) 19px, rgba(201, 184, 236, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-pink:checked), .bg-swatch--topo-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(247, 197, 218, 0.24) 15px, rgba(247, 197, 218, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(247, 197, 218, 0.18) 19px, rgba(247, 197, 218, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-teal:checked), .bg-swatch--topo-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(169, 226, 216, 0.24) 15px, rgba(169, 226, 216, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(169, 226, 216, 0.18) 19px, rgba(169, 226, 216, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-mono:checked), .bg-swatch--topo-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(201, 205, 212, 0.24) 15px, rgba(201, 205, 212, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(201, 205, 212, 0.18) 19px, rgba(201, 205, 212, 0.18) 20px);
  }

  body:has(#bg-topo-pastel-black:checked), .bg-swatch--topo-pastel-black {
    background-color: #fdfbf6;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(74, 79, 90, 0.24) 15px, rgba(74, 79, 90, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(74, 79, 90, 0.18) 19px, rgba(74, 79, 90, 0.18) 20px);
  }

  /* ---------- 等高線（宝石10色） ---------- */

  body:has(#bg-topo-jewel-green:checked), .bg-swatch--topo-jewel-green {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(14, 122, 95, 0.24) 15px, rgba(14, 122, 95, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(14, 122, 95, 0.18) 19px, rgba(14, 122, 95, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-yellow:checked), .bg-swatch--topo-jewel-yellow {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(184, 134, 11, 0.24) 15px, rgba(184, 134, 11, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(184, 134, 11, 0.18) 19px, rgba(184, 134, 11, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-red:checked), .bg-swatch--topo-jewel-red {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(155, 27, 60, 0.24) 15px, rgba(155, 27, 60, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(155, 27, 60, 0.18) 19px, rgba(155, 27, 60, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-blue:checked), .bg-swatch--topo-jewel-blue {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(30, 63, 143, 0.24) 15px, rgba(30, 63, 143, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(30, 63, 143, 0.18) 19px, rgba(30, 63, 143, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-orange:checked), .bg-swatch--topo-jewel-orange {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(180, 83, 23, 0.24) 15px, rgba(180, 83, 23, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(180, 83, 23, 0.18) 19px, rgba(180, 83, 23, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-purple:checked), .bg-swatch--topo-jewel-purple {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(91, 45, 142, 0.24) 15px, rgba(91, 45, 142, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(91, 45, 142, 0.18) 19px, rgba(91, 45, 142, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-pink:checked), .bg-swatch--topo-jewel-pink {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(168, 51, 110, 0.24) 15px, rgba(168, 51, 110, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(168, 51, 110, 0.18) 19px, rgba(168, 51, 110, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-teal:checked), .bg-swatch--topo-jewel-teal {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(14, 110, 140, 0.24) 15px, rgba(14, 110, 140, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(14, 110, 140, 0.18) 19px, rgba(14, 110, 140, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-mono:checked), .bg-swatch--topo-jewel-mono {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(120, 128, 140, 0.24) 15px, rgba(120, 128, 140, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(120, 128, 140, 0.18) 19px, rgba(120, 128, 140, 0.18) 20px);
  }

  body:has(#bg-topo-jewel-black:checked), .bg-swatch--topo-jewel-black {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(70, 75, 85, 0.24) 15px, rgba(70, 75, 85, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(70, 75, 85, 0.18) 19px, rgba(70, 75, 85, 0.18) 20px);
  }

  /* ---------- スパークル（あわい10色） ---------- */

  body:has(#bg-sparkle-pastel-green:checked), .bg-swatch--sparkle-pastel-green {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(181, 224, 168, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(181, 224, 168, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(181, 224, 168, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(181, 224, 168, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(181, 224, 168, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(181, 224, 168, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(181, 224, 168, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-yellow:checked), .bg-swatch--sparkle-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(247, 227, 155, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(247, 227, 155, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(247, 227, 155, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(247, 227, 155, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(247, 227, 155, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(247, 227, 155, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(247, 227, 155, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-red:checked), .bg-swatch--sparkle-pastel-red {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(244, 169, 163, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(244, 169, 163, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(244, 169, 163, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(244, 169, 163, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(244, 169, 163, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(244, 169, 163, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(244, 169, 163, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-blue:checked), .bg-swatch--sparkle-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(168, 200, 240, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(168, 200, 240, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(168, 200, 240, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(168, 200, 240, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(168, 200, 240, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(168, 200, 240, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(168, 200, 240, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-orange:checked), .bg-swatch--sparkle-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(248, 200, 154, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(248, 200, 154, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(248, 200, 154, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(248, 200, 154, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(248, 200, 154, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(248, 200, 154, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(248, 200, 154, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-purple:checked), .bg-swatch--sparkle-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(201, 184, 236, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(201, 184, 236, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(201, 184, 236, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(201, 184, 236, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(201, 184, 236, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(201, 184, 236, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(201, 184, 236, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-pink:checked), .bg-swatch--sparkle-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(247, 197, 218, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(247, 197, 218, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(247, 197, 218, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(247, 197, 218, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(247, 197, 218, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(247, 197, 218, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(247, 197, 218, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-teal:checked), .bg-swatch--sparkle-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(169, 226, 216, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(169, 226, 216, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(169, 226, 216, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(169, 226, 216, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(169, 226, 216, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(169, 226, 216, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(169, 226, 216, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-mono:checked), .bg-swatch--sparkle-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(201, 205, 212, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(201, 205, 212, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(201, 205, 212, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(201, 205, 212, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(201, 205, 212, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(201, 205, 212, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(201, 205, 212, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-pastel-black:checked), .bg-swatch--sparkle-pastel-black {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(74, 79, 90, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(74, 79, 90, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(74, 79, 90, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(74, 79, 90, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(74, 79, 90, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(74, 79, 90, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(74, 79, 90, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  /* ---------- スパークル（宝石10色） ---------- */

  body:has(#bg-sparkle-jewel-green:checked), .bg-swatch--sparkle-jewel-green {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(14, 122, 95, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(14, 122, 95, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(14, 122, 95, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(14, 122, 95, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(14, 122, 95, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(14, 122, 95, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(14, 122, 95, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-yellow:checked), .bg-swatch--sparkle-jewel-yellow {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(184, 134, 11, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(184, 134, 11, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(184, 134, 11, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(184, 134, 11, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(184, 134, 11, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(184, 134, 11, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(184, 134, 11, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-red:checked), .bg-swatch--sparkle-jewel-red {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(155, 27, 60, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(155, 27, 60, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(155, 27, 60, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(155, 27, 60, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(155, 27, 60, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(155, 27, 60, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(155, 27, 60, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-blue:checked), .bg-swatch--sparkle-jewel-blue {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(30, 63, 143, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(30, 63, 143, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(30, 63, 143, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(30, 63, 143, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(30, 63, 143, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(30, 63, 143, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(30, 63, 143, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-orange:checked), .bg-swatch--sparkle-jewel-orange {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(180, 83, 23, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(180, 83, 23, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(180, 83, 23, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(180, 83, 23, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(180, 83, 23, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(180, 83, 23, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(180, 83, 23, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-purple:checked), .bg-swatch--sparkle-jewel-purple {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(91, 45, 142, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(91, 45, 142, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(91, 45, 142, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(91, 45, 142, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(91, 45, 142, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(91, 45, 142, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(91, 45, 142, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-pink:checked), .bg-swatch--sparkle-jewel-pink {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(168, 51, 110, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(168, 51, 110, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(168, 51, 110, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(168, 51, 110, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(168, 51, 110, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(168, 51, 110, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(168, 51, 110, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-teal:checked), .bg-swatch--sparkle-jewel-teal {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(14, 110, 140, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(14, 110, 140, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(14, 110, 140, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(14, 110, 140, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(14, 110, 140, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(14, 110, 140, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(14, 110, 140, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-mono:checked), .bg-swatch--sparkle-jewel-mono {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(120, 128, 140, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(120, 128, 140, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(120, 128, 140, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(120, 128, 140, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(120, 128, 140, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(120, 128, 140, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(120, 128, 140, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-sparkle-jewel-black:checked), .bg-swatch--sparkle-jewel-black {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(70, 75, 85, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(70, 75, 85, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(70, 75, 85, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(70, 75, 85, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(70, 75, 85, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(70, 75, 85, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(70, 75, 85, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  /* ---------- クロスハッチ（あわい10色） ---------- */

  body:has(#bg-crosshatch-pastel-green:checked), .bg-swatch--crosshatch-pastel-green {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(181, 224, 168, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(181, 224, 168, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-yellow:checked), .bg-swatch--crosshatch-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(247, 227, 155, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(247, 227, 155, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-red:checked), .bg-swatch--crosshatch-pastel-red {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(244, 169, 163, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(244, 169, 163, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-blue:checked), .bg-swatch--crosshatch-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(168, 200, 240, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(168, 200, 240, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-orange:checked), .bg-swatch--crosshatch-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(248, 200, 154, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(248, 200, 154, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-purple:checked), .bg-swatch--crosshatch-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(201, 184, 236, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(201, 184, 236, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-pink:checked), .bg-swatch--crosshatch-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(247, 197, 218, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(247, 197, 218, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-teal:checked), .bg-swatch--crosshatch-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(169, 226, 216, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(169, 226, 216, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-mono:checked), .bg-swatch--crosshatch-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(201, 205, 212, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(201, 205, 212, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-pastel-black:checked), .bg-swatch--crosshatch-pastel-black {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(60deg, rgba(74, 79, 90, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(74, 79, 90, 0.2) 0 1px, transparent 1px 12px);
  }

  /* ---------- クロスハッチ（宝石10色） ---------- */

  body:has(#bg-crosshatch-jewel-green:checked), .bg-swatch--crosshatch-jewel-green {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(14, 122, 95, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(14, 122, 95, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-yellow:checked), .bg-swatch--crosshatch-jewel-yellow {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(184, 134, 11, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(184, 134, 11, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-red:checked), .bg-swatch--crosshatch-jewel-red {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(155, 27, 60, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(155, 27, 60, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-blue:checked), .bg-swatch--crosshatch-jewel-blue {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(30, 63, 143, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(30, 63, 143, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-orange:checked), .bg-swatch--crosshatch-jewel-orange {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(180, 83, 23, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(180, 83, 23, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-purple:checked), .bg-swatch--crosshatch-jewel-purple {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(91, 45, 142, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(91, 45, 142, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-pink:checked), .bg-swatch--crosshatch-jewel-pink {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(168, 51, 110, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(168, 51, 110, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-teal:checked), .bg-swatch--crosshatch-jewel-teal {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(14, 110, 140, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(14, 110, 140, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-mono:checked), .bg-swatch--crosshatch-jewel-mono {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(120, 128, 140, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(120, 128, 140, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-crosshatch-jewel-black:checked), .bg-swatch--crosshatch-jewel-black {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(70, 75, 85, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(70, 75, 85, 0.2) 0 1px, transparent 1px 12px);
  }

  /* ---------- ヘリンボーン（あわい10色） ---------- */

  body:has(#bg-herringbone-pastel-green:checked), .bg-swatch--herringbone-pastel-green {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(181, 224, 168, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(181, 224, 168, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-yellow:checked), .bg-swatch--herringbone-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(247, 227, 155, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(247, 227, 155, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-red:checked), .bg-swatch--herringbone-pastel-red {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(244, 169, 163, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(244, 169, 163, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-blue:checked), .bg-swatch--herringbone-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(168, 200, 240, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(168, 200, 240, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-orange:checked), .bg-swatch--herringbone-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(248, 200, 154, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(248, 200, 154, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-purple:checked), .bg-swatch--herringbone-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(201, 184, 236, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(201, 184, 236, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-pink:checked), .bg-swatch--herringbone-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(247, 197, 218, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(247, 197, 218, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-teal:checked), .bg-swatch--herringbone-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(169, 226, 216, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(169, 226, 216, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-mono:checked), .bg-swatch--herringbone-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(201, 205, 212, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(201, 205, 212, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-pastel-black:checked), .bg-swatch--herringbone-pastel-black {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(74, 79, 90, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(74, 79, 90, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  /* ---------- ヘリンボーン（宝石10色） ---------- */

  body:has(#bg-herringbone-jewel-green:checked), .bg-swatch--herringbone-jewel-green {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(14, 122, 95, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(14, 122, 95, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-yellow:checked), .bg-swatch--herringbone-jewel-yellow {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(184, 134, 11, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(184, 134, 11, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-red:checked), .bg-swatch--herringbone-jewel-red {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(155, 27, 60, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(155, 27, 60, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-blue:checked), .bg-swatch--herringbone-jewel-blue {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(30, 63, 143, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(30, 63, 143, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-orange:checked), .bg-swatch--herringbone-jewel-orange {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(180, 83, 23, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(180, 83, 23, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-purple:checked), .bg-swatch--herringbone-jewel-purple {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(91, 45, 142, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(91, 45, 142, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-pink:checked), .bg-swatch--herringbone-jewel-pink {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(168, 51, 110, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(168, 51, 110, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-teal:checked), .bg-swatch--herringbone-jewel-teal {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(14, 110, 140, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(14, 110, 140, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-mono:checked), .bg-swatch--herringbone-jewel-mono {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(120, 128, 140, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(120, 128, 140, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-herringbone-jewel-black:checked), .bg-swatch--herringbone-jewel-black {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(70, 75, 85, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(70, 75, 85, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  /* ---------- シェブロン（あわい10色） ---------- */

  body:has(#bg-chevron-pastel-green:checked), .bg-swatch--chevron-pastel-green {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(181, 224, 168, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-yellow:checked), .bg-swatch--chevron-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(247, 227, 155, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-red:checked), .bg-swatch--chevron-pastel-red {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(244, 169, 163, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-blue:checked), .bg-swatch--chevron-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(168, 200, 240, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-orange:checked), .bg-swatch--chevron-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(248, 200, 154, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-purple:checked), .bg-swatch--chevron-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(201, 184, 236, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-pink:checked), .bg-swatch--chevron-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(247, 197, 218, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-teal:checked), .bg-swatch--chevron-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(169, 226, 216, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-mono:checked), .bg-swatch--chevron-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(201, 205, 212, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-pastel-black:checked), .bg-swatch--chevron-pastel-black {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(135deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(74, 79, 90, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  /* ---------- シェブロン（宝石10色） ---------- */

  body:has(#bg-chevron-jewel-green:checked), .bg-swatch--chevron-jewel-green {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(14, 122, 95, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-yellow:checked), .bg-swatch--chevron-jewel-yellow {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(184, 134, 11, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-red:checked), .bg-swatch--chevron-jewel-red {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(155, 27, 60, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-blue:checked), .bg-swatch--chevron-jewel-blue {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(30, 63, 143, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-orange:checked), .bg-swatch--chevron-jewel-orange {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(180, 83, 23, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-purple:checked), .bg-swatch--chevron-jewel-purple {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(91, 45, 142, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-pink:checked), .bg-swatch--chevron-jewel-pink {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(168, 51, 110, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-teal:checked), .bg-swatch--chevron-jewel-teal {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(14, 110, 140, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-mono:checked), .bg-swatch--chevron-jewel-mono {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(120, 128, 140, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-chevron-jewel-black:checked), .bg-swatch--chevron-jewel-black {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(70, 75, 85, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  /* ---------- 波形ライン（あわい10色） ---------- */

  body:has(#bg-wave-pastel-green:checked), .bg-swatch--wave-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23b5e0a8' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-yellow:checked), .bg-swatch--wave-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f7e39b' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-red:checked), .bg-swatch--wave-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f4a9a3' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-blue:checked), .bg-swatch--wave-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23a8c8f0' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-orange:checked), .bg-swatch--wave-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f8c89a' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-purple:checked), .bg-swatch--wave-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c9b8ec' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-pink:checked), .bg-swatch--wave-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f7c5da' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-teal:checked), .bg-swatch--wave-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23a9e2d8' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-mono:checked), .bg-swatch--wave-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c9cdd4' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-pastel-black:checked), .bg-swatch--wave-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%234a4f5a' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  /* ---------- 波形ライン（宝石10色） ---------- */

  body:has(#bg-wave-jewel-green:checked), .bg-swatch--wave-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%230e7a5f' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-yellow:checked), .bg-swatch--wave-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23b8860b' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-red:checked), .bg-swatch--wave-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%239b1b3c' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-blue:checked), .bg-swatch--wave-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%231e3f8f' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-orange:checked), .bg-swatch--wave-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23b45317' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-purple:checked), .bg-swatch--wave-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%235b2d8e' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-pink:checked), .bg-swatch--wave-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23a8336e' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-teal:checked), .bg-swatch--wave-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%230e6e8c' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-mono:checked), .bg-swatch--wave-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%234d5560' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-wave-jewel-black:checked), .bg-swatch--wave-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23282c32' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  /* ---------- レンガ調（あわい10色） ---------- */

  body:has(#bg-brick-pastel-green:checked), .bg-swatch--brick-pastel-green {
    background-color: #b5e0a8;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-yellow:checked), .bg-swatch--brick-pastel-yellow {
    background-color: #f7e39b;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-red:checked), .bg-swatch--brick-pastel-red {
    background-color: #f4a9a3;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-blue:checked), .bg-swatch--brick-pastel-blue {
    background-color: #a8c8f0;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-orange:checked), .bg-swatch--brick-pastel-orange {
    background-color: #f8c89a;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-purple:checked), .bg-swatch--brick-pastel-purple {
    background-color: #c9b8ec;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-pink:checked), .bg-swatch--brick-pastel-pink {
    background-color: #f7c5da;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-teal:checked), .bg-swatch--brick-pastel-teal {
    background-color: #a9e2d8;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-mono:checked), .bg-swatch--brick-pastel-mono {
    background-color: #c9cdd4;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-pastel-black:checked), .bg-swatch--brick-pastel-black {
    background-color: #4a4f5a;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fdfbf6 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fdfbf6 0);
    background-size: 58px 29px;
  }

  /* ---------- レンガ調（宝石10色） ---------- */

  body:has(#bg-brick-jewel-green:checked), .bg-swatch--brick-jewel-green {
    background-color: #0e7a5f;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-yellow:checked), .bg-swatch--brick-jewel-yellow {
    background-color: #b8860b;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-red:checked), .bg-swatch--brick-jewel-red {
    background-color: #9b1b3c;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-blue:checked), .bg-swatch--brick-jewel-blue {
    background-color: #1e3f8f;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-orange:checked), .bg-swatch--brick-jewel-orange {
    background-color: #b45317;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-purple:checked), .bg-swatch--brick-jewel-purple {
    background-color: #5b2d8e;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-pink:checked), .bg-swatch--brick-jewel-pink {
    background-color: #a8336e;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-teal:checked), .bg-swatch--brick-jewel-teal {
    background-color: #0e6e8c;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-mono:checked), .bg-swatch--brick-jewel-mono {
    background-color: #78808c;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-brick-jewel-black:checked), .bg-swatch--brick-jewel-black {
    background-color: #464b55;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  /* ---------- ギンガムチェック（あわい10色） ---------- */

  body:has(#bg-gingham-pastel-green:checked), .bg-swatch--gingham-pastel-green {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(181, 224, 168, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(181, 224, 168, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-yellow:checked), .bg-swatch--gingham-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(247, 227, 155, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(247, 227, 155, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-red:checked), .bg-swatch--gingham-pastel-red {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(244, 169, 163, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(244, 169, 163, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-blue:checked), .bg-swatch--gingham-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 200, 240, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(168, 200, 240, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-orange:checked), .bg-swatch--gingham-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(248, 200, 154, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(248, 200, 154, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-purple:checked), .bg-swatch--gingham-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 184, 236, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(201, 184, 236, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-pink:checked), .bg-swatch--gingham-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(247, 197, 218, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(247, 197, 218, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-teal:checked), .bg-swatch--gingham-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(169, 226, 216, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(169, 226, 216, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-mono:checked), .bg-swatch--gingham-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 205, 212, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(201, 205, 212, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-pastel-black:checked), .bg-swatch--gingham-pastel-black {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(74, 79, 90, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(74, 79, 90, 0.22) 0 10px, transparent 10px 24px);
  }

  /* ---------- ギンガムチェック（宝石10色） ---------- */

  body:has(#bg-gingham-jewel-green:checked), .bg-swatch--gingham-jewel-green {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(14, 122, 95, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(14, 122, 95, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-yellow:checked), .bg-swatch--gingham-jewel-yellow {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(184, 134, 11, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(184, 134, 11, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-red:checked), .bg-swatch--gingham-jewel-red {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(155, 27, 60, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(155, 27, 60, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-blue:checked), .bg-swatch--gingham-jewel-blue {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(30, 63, 143, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(30, 63, 143, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-orange:checked), .bg-swatch--gingham-jewel-orange {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(180, 83, 23, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(180, 83, 23, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-purple:checked), .bg-swatch--gingham-jewel-purple {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(91, 45, 142, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(91, 45, 142, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-pink:checked), .bg-swatch--gingham-jewel-pink {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 51, 110, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(168, 51, 110, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-teal:checked), .bg-swatch--gingham-jewel-teal {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(14, 110, 140, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(14, 110, 140, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-mono:checked), .bg-swatch--gingham-jewel-mono {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(120, 128, 140, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(120, 128, 140, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-gingham-jewel-black:checked), .bg-swatch--gingham-jewel-black {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(70, 75, 85, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(70, 75, 85, 0.22) 0 10px, transparent 10px 24px);
  }



  /* ---------- クロス柄（あわい10色） ---------- */

  body:has(#bg-cross-pastel-green:checked), .bg-swatch--cross-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23b5e0a8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-yellow:checked), .bg-swatch--cross-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f7e39b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-red:checked), .bg-swatch--cross-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f4a9a3' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-blue:checked), .bg-swatch--cross-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23a8c8f0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-orange:checked), .bg-swatch--cross-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f8c89a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-purple:checked), .bg-swatch--cross-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c9b8ec' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-pink:checked), .bg-swatch--cross-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f7c5da' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-teal:checked), .bg-swatch--cross-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23a9e2d8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-mono:checked), .bg-swatch--cross-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c9cdd4' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-pastel-black:checked), .bg-swatch--cross-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%234a4f5a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  /* ---------- クロス柄（宝石10色） ---------- */

  body:has(#bg-cross-jewel-green:checked), .bg-swatch--cross-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%230e7a5f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-yellow:checked), .bg-swatch--cross-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23b8860b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-red:checked), .bg-swatch--cross-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%239b1b3c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-blue:checked), .bg-swatch--cross-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%231e3f8f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-orange:checked), .bg-swatch--cross-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23b45317' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-purple:checked), .bg-swatch--cross-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%235b2d8e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-pink:checked), .bg-swatch--cross-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23a8336e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-teal:checked), .bg-swatch--cross-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%230e6e8c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-mono:checked), .bg-swatch--cross-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%234d5560' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-cross-jewel-black:checked), .bg-swatch--cross-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23282c32' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  /* ---------- ステッチ（あわい10色） ---------- */

  body:has(#bg-stitch-pastel-green:checked), .bg-swatch--stitch-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23b5e0a8' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-yellow:checked), .bg-swatch--stitch-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f7e39b' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-red:checked), .bg-swatch--stitch-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f4a9a3' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-blue:checked), .bg-swatch--stitch-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23a8c8f0' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-orange:checked), .bg-swatch--stitch-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f8c89a' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-purple:checked), .bg-swatch--stitch-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c9b8ec' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-pink:checked), .bg-swatch--stitch-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f7c5da' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-teal:checked), .bg-swatch--stitch-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23a9e2d8' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-mono:checked), .bg-swatch--stitch-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c9cdd4' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-pastel-black:checked), .bg-swatch--stitch-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%234a4f5a' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  /* ---------- ステッチ（宝石10色） ---------- */

  body:has(#bg-stitch-jewel-green:checked), .bg-swatch--stitch-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%230e7a5f' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-yellow:checked), .bg-swatch--stitch-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23b8860b' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-red:checked), .bg-swatch--stitch-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%239b1b3c' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-blue:checked), .bg-swatch--stitch-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%231e3f8f' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-orange:checked), .bg-swatch--stitch-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23b45317' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-purple:checked), .bg-swatch--stitch-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%235b2d8e' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-pink:checked), .bg-swatch--stitch-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23a8336e' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-teal:checked), .bg-swatch--stitch-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%230e6e8c' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-mono:checked), .bg-swatch--stitch-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%234d5560' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-stitch-jewel-black:checked), .bg-swatch--stitch-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23282c32' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  /* ---------- 紙のグレイン（あわい10色） ---------- */

  body:has(#bg-grain-pastel-green:checked), .bg-swatch--grain-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.710 0 0 0 0 0.878 0 0 0 0 0.659 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-yellow:checked), .bg-swatch--grain-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.969 0 0 0 0 0.890 0 0 0 0 0.608 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-red:checked), .bg-swatch--grain-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.957 0 0 0 0 0.663 0 0 0 0 0.639 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-blue:checked), .bg-swatch--grain-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.659 0 0 0 0 0.784 0 0 0 0 0.941 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-orange:checked), .bg-swatch--grain-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.973 0 0 0 0 0.784 0 0 0 0 0.604 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-purple:checked), .bg-swatch--grain-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.788 0 0 0 0 0.722 0 0 0 0 0.925 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-pink:checked), .bg-swatch--grain-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.969 0 0 0 0 0.773 0 0 0 0 0.855 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-teal:checked), .bg-swatch--grain-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.663 0 0 0 0 0.886 0 0 0 0 0.847 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-mono:checked), .bg-swatch--grain-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.788 0 0 0 0 0.804 0 0 0 0 0.831 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-pastel-black:checked), .bg-swatch--grain-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.290 0 0 0 0 0.310 0 0 0 0 0.353 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  /* ---------- 紙のグレイン（宝石10色） ---------- */

  body:has(#bg-grain-jewel-green:checked), .bg-swatch--grain-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.055 0 0 0 0 0.478 0 0 0 0 0.373 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-yellow:checked), .bg-swatch--grain-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.722 0 0 0 0 0.525 0 0 0 0 0.043 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-red:checked), .bg-swatch--grain-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.608 0 0 0 0 0.106 0 0 0 0 0.235 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-blue:checked), .bg-swatch--grain-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.118 0 0 0 0 0.247 0 0 0 0 0.561 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-orange:checked), .bg-swatch--grain-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.706 0 0 0 0 0.325 0 0 0 0 0.090 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-purple:checked), .bg-swatch--grain-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.357 0 0 0 0 0.176 0 0 0 0 0.557 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-pink:checked), .bg-swatch--grain-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.659 0 0 0 0 0.200 0 0 0 0 0.431 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-teal:checked), .bg-swatch--grain-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.055 0 0 0 0 0.431 0 0 0 0 0.549 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-mono:checked), .bg-swatch--grain-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.302 0 0 0 0 0.333 0 0 0 0 0.376 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-grain-jewel-black:checked), .bg-swatch--grain-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.157 0 0 0 0 0.173 0 0 0 0 0.196 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  /* ---------- 回路基板（あわい10色） ---------- */

  body:has(#bg-circuit-pastel-green:checked), .bg-swatch--circuit-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23b5e0a8' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23b5e0a8'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-yellow:checked), .bg-swatch--circuit-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f7e39b' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f7e39b'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-red:checked), .bg-swatch--circuit-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f4a9a3' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f4a9a3'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-blue:checked), .bg-swatch--circuit-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23a8c8f0' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23a8c8f0'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-orange:checked), .bg-swatch--circuit-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f8c89a' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f8c89a'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-purple:checked), .bg-swatch--circuit-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c9b8ec' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c9b8ec'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-pink:checked), .bg-swatch--circuit-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f7c5da' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f7c5da'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-teal:checked), .bg-swatch--circuit-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23a9e2d8' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23a9e2d8'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-mono:checked), .bg-swatch--circuit-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c9cdd4' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c9cdd4'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-pastel-black:checked), .bg-swatch--circuit-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%234a4f5a' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%234a4f5a'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  /* ---------- 回路基板（宝石10色） ---------- */

  body:has(#bg-circuit-jewel-green:checked), .bg-swatch--circuit-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%230e7a5f' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%230e7a5f'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-yellow:checked), .bg-swatch--circuit-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23b8860b'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-red:checked), .bg-swatch--circuit-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%239b1b3c' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%239b1b3c'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-blue:checked), .bg-swatch--circuit-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%231e3f8f' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%231e3f8f'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-orange:checked), .bg-swatch--circuit-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23b45317' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23b45317'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-purple:checked), .bg-swatch--circuit-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%235b2d8e' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%235b2d8e'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-pink:checked), .bg-swatch--circuit-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23a8336e' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23a8336e'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-teal:checked), .bg-swatch--circuit-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%230e6e8c' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%230e6e8c'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-mono:checked), .bg-swatch--circuit-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%234d5560' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%234d5560'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-circuit-jewel-black:checked), .bg-swatch--circuit-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23282c32' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23282c32'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  /* ---------- ダイヤモンドチェック（あわい10色） ---------- */

  body:has(#bg-houndstooth-pastel-green:checked), .bg-swatch--houndstooth-pastel-green {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(181, 224, 168) 25%, transparent 25%, transparent 75%, rgb(181, 224, 168) 75%, rgb(181, 224, 168)),
      linear-gradient(45deg, rgb(181, 224, 168) 25%, transparent 25%, transparent 75%, rgb(181, 224, 168) 75%, rgb(181, 224, 168)),
      linear-gradient(-45deg, rgb(181, 224, 168) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(181, 224, 168) 75%, rgb(181, 224, 168));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-yellow:checked), .bg-swatch--houndstooth-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(247, 227, 155) 25%, transparent 25%, transparent 75%, rgb(247, 227, 155) 75%, rgb(247, 227, 155)),
      linear-gradient(45deg, rgb(247, 227, 155) 25%, transparent 25%, transparent 75%, rgb(247, 227, 155) 75%, rgb(247, 227, 155)),
      linear-gradient(-45deg, rgb(247, 227, 155) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(247, 227, 155) 75%, rgb(247, 227, 155));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-red:checked), .bg-swatch--houndstooth-pastel-red {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(244, 169, 163) 25%, transparent 25%, transparent 75%, rgb(244, 169, 163) 75%, rgb(244, 169, 163)),
      linear-gradient(45deg, rgb(244, 169, 163) 25%, transparent 25%, transparent 75%, rgb(244, 169, 163) 75%, rgb(244, 169, 163)),
      linear-gradient(-45deg, rgb(244, 169, 163) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(244, 169, 163) 75%, rgb(244, 169, 163));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-blue:checked), .bg-swatch--houndstooth-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(168, 200, 240) 25%, transparent 25%, transparent 75%, rgb(168, 200, 240) 75%, rgb(168, 200, 240)),
      linear-gradient(45deg, rgb(168, 200, 240) 25%, transparent 25%, transparent 75%, rgb(168, 200, 240) 75%, rgb(168, 200, 240)),
      linear-gradient(-45deg, rgb(168, 200, 240) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(168, 200, 240) 75%, rgb(168, 200, 240));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-orange:checked), .bg-swatch--houndstooth-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(248, 200, 154) 25%, transparent 25%, transparent 75%, rgb(248, 200, 154) 75%, rgb(248, 200, 154)),
      linear-gradient(45deg, rgb(248, 200, 154) 25%, transparent 25%, transparent 75%, rgb(248, 200, 154) 75%, rgb(248, 200, 154)),
      linear-gradient(-45deg, rgb(248, 200, 154) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(248, 200, 154) 75%, rgb(248, 200, 154));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-purple:checked), .bg-swatch--houndstooth-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(201, 184, 236) 25%, transparent 25%, transparent 75%, rgb(201, 184, 236) 75%, rgb(201, 184, 236)),
      linear-gradient(45deg, rgb(201, 184, 236) 25%, transparent 25%, transparent 75%, rgb(201, 184, 236) 75%, rgb(201, 184, 236)),
      linear-gradient(-45deg, rgb(201, 184, 236) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(201, 184, 236) 75%, rgb(201, 184, 236));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-pink:checked), .bg-swatch--houndstooth-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(247, 197, 218) 25%, transparent 25%, transparent 75%, rgb(247, 197, 218) 75%, rgb(247, 197, 218)),
      linear-gradient(45deg, rgb(247, 197, 218) 25%, transparent 25%, transparent 75%, rgb(247, 197, 218) 75%, rgb(247, 197, 218)),
      linear-gradient(-45deg, rgb(247, 197, 218) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(247, 197, 218) 75%, rgb(247, 197, 218));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-teal:checked), .bg-swatch--houndstooth-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(169, 226, 216) 25%, transparent 25%, transparent 75%, rgb(169, 226, 216) 75%, rgb(169, 226, 216)),
      linear-gradient(45deg, rgb(169, 226, 216) 25%, transparent 25%, transparent 75%, rgb(169, 226, 216) 75%, rgb(169, 226, 216)),
      linear-gradient(-45deg, rgb(169, 226, 216) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(169, 226, 216) 75%, rgb(169, 226, 216));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-mono:checked), .bg-swatch--houndstooth-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(201, 205, 212) 25%, transparent 25%, transparent 75%, rgb(201, 205, 212) 75%, rgb(201, 205, 212)),
      linear-gradient(45deg, rgb(201, 205, 212) 25%, transparent 25%, transparent 75%, rgb(201, 205, 212) 75%, rgb(201, 205, 212)),
      linear-gradient(-45deg, rgb(201, 205, 212) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(201, 205, 212) 75%, rgb(201, 205, 212));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-pastel-black:checked), .bg-swatch--houndstooth-pastel-black {
    background-color: #fdfbf6;
    background-image:
      linear-gradient(45deg, rgb(74, 79, 90) 25%, transparent 25%, transparent 75%, rgb(74, 79, 90) 75%, rgb(74, 79, 90)),
      linear-gradient(45deg, rgb(74, 79, 90) 25%, transparent 25%, transparent 75%, rgb(74, 79, 90) 75%, rgb(74, 79, 90)),
      linear-gradient(-45deg, rgb(74, 79, 90) 25%, #fdfbf6 25%, #fdfbf6 75%, rgb(74, 79, 90) 75%, rgb(74, 79, 90));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  /* ---------- ダイヤモンドチェック（宝石10色） ---------- */

  body:has(#bg-houndstooth-jewel-green:checked), .bg-swatch--houndstooth-jewel-green {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(14, 122, 95) 25%, transparent 25%, transparent 75%, rgb(14, 122, 95) 75%, rgb(14, 122, 95)),
      linear-gradient(45deg, rgb(14, 122, 95) 25%, transparent 25%, transparent 75%, rgb(14, 122, 95) 75%, rgb(14, 122, 95)),
      linear-gradient(-45deg, rgb(14, 122, 95) 25%, #14161a 25%, #14161a 75%, rgb(14, 122, 95) 75%, rgb(14, 122, 95));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-yellow:checked), .bg-swatch--houndstooth-jewel-yellow {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(184, 134, 11) 25%, transparent 25%, transparent 75%, rgb(184, 134, 11) 75%, rgb(184, 134, 11)),
      linear-gradient(45deg, rgb(184, 134, 11) 25%, transparent 25%, transparent 75%, rgb(184, 134, 11) 75%, rgb(184, 134, 11)),
      linear-gradient(-45deg, rgb(184, 134, 11) 25%, #14161a 25%, #14161a 75%, rgb(184, 134, 11) 75%, rgb(184, 134, 11));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-red:checked), .bg-swatch--houndstooth-jewel-red {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(155, 27, 60) 25%, transparent 25%, transparent 75%, rgb(155, 27, 60) 75%, rgb(155, 27, 60)),
      linear-gradient(45deg, rgb(155, 27, 60) 25%, transparent 25%, transparent 75%, rgb(155, 27, 60) 75%, rgb(155, 27, 60)),
      linear-gradient(-45deg, rgb(155, 27, 60) 25%, #14161a 25%, #14161a 75%, rgb(155, 27, 60) 75%, rgb(155, 27, 60));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-blue:checked), .bg-swatch--houndstooth-jewel-blue {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(30, 63, 143) 25%, transparent 25%, transparent 75%, rgb(30, 63, 143) 75%, rgb(30, 63, 143)),
      linear-gradient(45deg, rgb(30, 63, 143) 25%, transparent 25%, transparent 75%, rgb(30, 63, 143) 75%, rgb(30, 63, 143)),
      linear-gradient(-45deg, rgb(30, 63, 143) 25%, #14161a 25%, #14161a 75%, rgb(30, 63, 143) 75%, rgb(30, 63, 143));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-orange:checked), .bg-swatch--houndstooth-jewel-orange {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(180, 83, 23) 25%, transparent 25%, transparent 75%, rgb(180, 83, 23) 75%, rgb(180, 83, 23)),
      linear-gradient(45deg, rgb(180, 83, 23) 25%, transparent 25%, transparent 75%, rgb(180, 83, 23) 75%, rgb(180, 83, 23)),
      linear-gradient(-45deg, rgb(180, 83, 23) 25%, #14161a 25%, #14161a 75%, rgb(180, 83, 23) 75%, rgb(180, 83, 23));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-purple:checked), .bg-swatch--houndstooth-jewel-purple {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(91, 45, 142) 25%, transparent 25%, transparent 75%, rgb(91, 45, 142) 75%, rgb(91, 45, 142)),
      linear-gradient(45deg, rgb(91, 45, 142) 25%, transparent 25%, transparent 75%, rgb(91, 45, 142) 75%, rgb(91, 45, 142)),
      linear-gradient(-45deg, rgb(91, 45, 142) 25%, #14161a 25%, #14161a 75%, rgb(91, 45, 142) 75%, rgb(91, 45, 142));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-pink:checked), .bg-swatch--houndstooth-jewel-pink {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(168, 51, 110) 25%, transparent 25%, transparent 75%, rgb(168, 51, 110) 75%, rgb(168, 51, 110)),
      linear-gradient(45deg, rgb(168, 51, 110) 25%, transparent 25%, transparent 75%, rgb(168, 51, 110) 75%, rgb(168, 51, 110)),
      linear-gradient(-45deg, rgb(168, 51, 110) 25%, #14161a 25%, #14161a 75%, rgb(168, 51, 110) 75%, rgb(168, 51, 110));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-teal:checked), .bg-swatch--houndstooth-jewel-teal {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(14, 110, 140) 25%, transparent 25%, transparent 75%, rgb(14, 110, 140) 75%, rgb(14, 110, 140)),
      linear-gradient(45deg, rgb(14, 110, 140) 25%, transparent 25%, transparent 75%, rgb(14, 110, 140) 75%, rgb(14, 110, 140)),
      linear-gradient(-45deg, rgb(14, 110, 140) 25%, #14161a 25%, #14161a 75%, rgb(14, 110, 140) 75%, rgb(14, 110, 140));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-mono:checked), .bg-swatch--houndstooth-jewel-mono {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(77, 85, 96) 25%, transparent 25%, transparent 75%, rgb(77, 85, 96) 75%, rgb(77, 85, 96)),
      linear-gradient(45deg, rgb(77, 85, 96) 25%, transparent 25%, transparent 75%, rgb(77, 85, 96) 75%, rgb(77, 85, 96)),
      linear-gradient(-45deg, rgb(77, 85, 96) 25%, #14161a 25%, #14161a 75%, rgb(77, 85, 96) 75%, rgb(77, 85, 96));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-houndstooth-jewel-black:checked), .bg-swatch--houndstooth-jewel-black {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(40, 44, 50) 25%, transparent 25%, transparent 75%, rgb(40, 44, 50) 75%, rgb(40, 44, 50)),
      linear-gradient(45deg, rgb(40, 44, 50) 25%, transparent 25%, transparent 75%, rgb(40, 44, 50) 75%, rgb(40, 44, 50)),
      linear-gradient(-45deg, rgb(40, 44, 50) 25%, #14161a 25%, #14161a 75%, rgb(40, 44, 50) 75%, rgb(40, 44, 50));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  /* ---------- タータンチェック（あわい10色） ---------- */

  body:has(#bg-tartan-pastel-green:checked), .bg-swatch--tartan-pastel-green {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(181, 224, 168, 0.28) 0 10px, transparent 10px 20px, rgba(181, 224, 168, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(181, 224, 168, 0.28) 0 10px, transparent 10px 20px, rgba(181, 224, 168, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-yellow:checked), .bg-swatch--tartan-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(247, 227, 155, 0.28) 0 10px, transparent 10px 20px, rgba(247, 227, 155, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(247, 227, 155, 0.28) 0 10px, transparent 10px 20px, rgba(247, 227, 155, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-red:checked), .bg-swatch--tartan-pastel-red {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(244, 169, 163, 0.28) 0 10px, transparent 10px 20px, rgba(244, 169, 163, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(244, 169, 163, 0.28) 0 10px, transparent 10px 20px, rgba(244, 169, 163, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-blue:checked), .bg-swatch--tartan-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 200, 240, 0.28) 0 10px, transparent 10px 20px, rgba(168, 200, 240, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(168, 200, 240, 0.28) 0 10px, transparent 10px 20px, rgba(168, 200, 240, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-orange:checked), .bg-swatch--tartan-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(248, 200, 154, 0.28) 0 10px, transparent 10px 20px, rgba(248, 200, 154, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(248, 200, 154, 0.28) 0 10px, transparent 10px 20px, rgba(248, 200, 154, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-purple:checked), .bg-swatch--tartan-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 184, 236, 0.28) 0 10px, transparent 10px 20px, rgba(201, 184, 236, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(201, 184, 236, 0.28) 0 10px, transparent 10px 20px, rgba(201, 184, 236, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-pink:checked), .bg-swatch--tartan-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(247, 197, 218, 0.28) 0 10px, transparent 10px 20px, rgba(247, 197, 218, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(247, 197, 218, 0.28) 0 10px, transparent 10px 20px, rgba(247, 197, 218, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-teal:checked), .bg-swatch--tartan-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(169, 226, 216, 0.28) 0 10px, transparent 10px 20px, rgba(169, 226, 216, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(169, 226, 216, 0.28) 0 10px, transparent 10px 20px, rgba(169, 226, 216, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-mono:checked), .bg-swatch--tartan-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 205, 212, 0.28) 0 10px, transparent 10px 20px, rgba(201, 205, 212, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(201, 205, 212, 0.28) 0 10px, transparent 10px 20px, rgba(201, 205, 212, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-pastel-black:checked), .bg-swatch--tartan-pastel-black {
    background-color: #fdfbf6;
    background-image:
      repeating-linear-gradient(90deg, rgba(74, 79, 90, 0.28) 0 10px, transparent 10px 20px, rgba(74, 79, 90, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(74, 79, 90, 0.28) 0 10px, transparent 10px 20px, rgba(74, 79, 90, 0.16) 20px 24px, transparent 24px 44px);
  }

  /* ---------- タータンチェック（宝石10色） ---------- */

  body:has(#bg-tartan-jewel-green:checked), .bg-swatch--tartan-jewel-green {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(14, 122, 95, 0.28) 0 10px, transparent 10px 20px, rgba(14, 122, 95, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(14, 122, 95, 0.28) 0 10px, transparent 10px 20px, rgba(14, 122, 95, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-yellow:checked), .bg-swatch--tartan-jewel-yellow {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(184, 134, 11, 0.28) 0 10px, transparent 10px 20px, rgba(184, 134, 11, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(184, 134, 11, 0.28) 0 10px, transparent 10px 20px, rgba(184, 134, 11, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-red:checked), .bg-swatch--tartan-jewel-red {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(155, 27, 60, 0.28) 0 10px, transparent 10px 20px, rgba(155, 27, 60, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(155, 27, 60, 0.28) 0 10px, transparent 10px 20px, rgba(155, 27, 60, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-blue:checked), .bg-swatch--tartan-jewel-blue {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(30, 63, 143, 0.28) 0 10px, transparent 10px 20px, rgba(30, 63, 143, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(30, 63, 143, 0.28) 0 10px, transparent 10px 20px, rgba(30, 63, 143, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-orange:checked), .bg-swatch--tartan-jewel-orange {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(180, 83, 23, 0.28) 0 10px, transparent 10px 20px, rgba(180, 83, 23, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(180, 83, 23, 0.28) 0 10px, transparent 10px 20px, rgba(180, 83, 23, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-purple:checked), .bg-swatch--tartan-jewel-purple {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(91, 45, 142, 0.28) 0 10px, transparent 10px 20px, rgba(91, 45, 142, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(91, 45, 142, 0.28) 0 10px, transparent 10px 20px, rgba(91, 45, 142, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-pink:checked), .bg-swatch--tartan-jewel-pink {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(168, 51, 110, 0.28) 0 10px, transparent 10px 20px, rgba(168, 51, 110, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(168, 51, 110, 0.28) 0 10px, transparent 10px 20px, rgba(168, 51, 110, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-teal:checked), .bg-swatch--tartan-jewel-teal {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(14, 110, 140, 0.28) 0 10px, transparent 10px 20px, rgba(14, 110, 140, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(14, 110, 140, 0.28) 0 10px, transparent 10px 20px, rgba(14, 110, 140, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-mono:checked), .bg-swatch--tartan-jewel-mono {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(120, 128, 140, 0.28) 0 10px, transparent 10px 20px, rgba(120, 128, 140, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(120, 128, 140, 0.28) 0 10px, transparent 10px 20px, rgba(120, 128, 140, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-tartan-jewel-black:checked), .bg-swatch--tartan-jewel-black {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(70, 75, 85, 0.28) 0 10px, transparent 10px 20px, rgba(70, 75, 85, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(70, 75, 85, 0.28) 0 10px, transparent 10px 20px, rgba(70, 75, 85, 0.16) 20px 24px, transparent 24px 44px);
  }

  /* ---------- デニム風（あわい10色） ---------- */

  body:has(#bg-denim-pastel-green:checked), .bg-swatch--denim-pastel-green {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(181, 224, 168, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-yellow:checked), .bg-swatch--denim-pastel-yellow {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(247, 227, 155, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-red:checked), .bg-swatch--denim-pastel-red {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(244, 169, 163, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-blue:checked), .bg-swatch--denim-pastel-blue {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(168, 200, 240, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-orange:checked), .bg-swatch--denim-pastel-orange {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(248, 200, 154, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-purple:checked), .bg-swatch--denim-pastel-purple {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(201, 184, 236, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-pink:checked), .bg-swatch--denim-pastel-pink {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(247, 197, 218, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-teal:checked), .bg-swatch--denim-pastel-teal {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(169, 226, 216, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-mono:checked), .bg-swatch--denim-pastel-mono {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(201, 205, 212, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-pastel-black:checked), .bg-swatch--denim-pastel-black {
    background-color: #fdfbf6;
    background-image: repeating-linear-gradient(45deg, rgba(74, 79, 90, 0.35) 0 2px, transparent 2px 5px);
  }

  /* ---------- デニム風（宝石10色） ---------- */

  body:has(#bg-denim-jewel-green:checked), .bg-swatch--denim-jewel-green {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(14, 122, 95, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-yellow:checked), .bg-swatch--denim-jewel-yellow {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(184, 134, 11, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-red:checked), .bg-swatch--denim-jewel-red {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(155, 27, 60, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-blue:checked), .bg-swatch--denim-jewel-blue {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(30, 63, 143, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-orange:checked), .bg-swatch--denim-jewel-orange {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(180, 83, 23, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-purple:checked), .bg-swatch--denim-jewel-purple {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(91, 45, 142, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-pink:checked), .bg-swatch--denim-jewel-pink {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(168, 51, 110, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-teal:checked), .bg-swatch--denim-jewel-teal {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(14, 110, 140, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-mono:checked), .bg-swatch--denim-jewel-mono {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(120, 128, 140, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-denim-jewel-black:checked), .bg-swatch--denim-jewel-black {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(70, 75, 85, 0.35) 0 2px, transparent 2px 5px);
  }



  /* ---------- 青海波（あわい10色） ---------- */

  body:has(#bg-seigaiha-pastel-green:checked), .bg-swatch--seigaiha-pastel-green {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23b5e0a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b5e0a8'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23b5e0a8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b5e0a8'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-yellow:checked), .bg-swatch--seigaiha-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f7e39b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f7e39b'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f7e39b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f7e39b'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-red:checked), .bg-swatch--seigaiha-pastel-red {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f4a9a3' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f4a9a3'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f4a9a3' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f4a9a3'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-blue:checked), .bg-swatch--seigaiha-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23a8c8f0' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8c8f0'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23a8c8f0' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8c8f0'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-orange:checked), .bg-swatch--seigaiha-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f8c89a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f8c89a'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f8c89a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f8c89a'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-purple:checked), .bg-swatch--seigaiha-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23c9b8ec' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9b8ec'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23c9b8ec' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9b8ec'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-pink:checked), .bg-swatch--seigaiha-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f7c5da' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f7c5da'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23f7c5da' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f7c5da'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-teal:checked), .bg-swatch--seigaiha-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23a9e2d8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a9e2d8'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23a9e2d8' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a9e2d8'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-mono:checked), .bg-swatch--seigaiha-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23c9cdd4' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9cdd4'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%23c9cdd4' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9cdd4'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-pastel-black:checked), .bg-swatch--seigaiha-pastel-black {
    background-color: #fdfbf6;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%234a4f5a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%234a4f5a'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fdfbf6'/><g fill='none' stroke='%234a4f5a' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%234a4f5a'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  /* ---------- 青海波（宝石10色） ---------- */

  body:has(#bg-seigaiha-jewel-green:checked), .bg-swatch--seigaiha-jewel-green {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%230e7a5f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%230e7a5f'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%230e7a5f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%230e7a5f'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-yellow:checked), .bg-swatch--seigaiha-jewel-yellow {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23b8860b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b8860b'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23b8860b' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b8860b'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-red:checked), .bg-swatch--seigaiha-jewel-red {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%239b1b3c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%239b1b3c'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%239b1b3c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%239b1b3c'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-blue:checked), .bg-swatch--seigaiha-jewel-blue {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%231e3f8f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%231e3f8f'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%231e3f8f' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%231e3f8f'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-orange:checked), .bg-swatch--seigaiha-jewel-orange {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23b45317' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b45317'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23b45317' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23b45317'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-purple:checked), .bg-swatch--seigaiha-jewel-purple {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%235b2d8e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%235b2d8e'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%235b2d8e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%235b2d8e'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-pink:checked), .bg-swatch--seigaiha-jewel-pink {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23a8336e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8336e'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23a8336e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23a8336e'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-teal:checked), .bg-swatch--seigaiha-jewel-teal {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%230e6e8c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%230e6e8c'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%230e6e8c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%230e6e8c'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-mono:checked), .bg-swatch--seigaiha-jewel-mono {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%2378808c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2378808c'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%2378808c' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%2378808c'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-seigaiha-jewel-black:checked), .bg-swatch--seigaiha-jewel-black {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23464b55' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23464b55'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23464b55' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23464b55'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  /* ---------- 鱗文様（あわい10色） ---------- */

  body:has(#bg-uroko-pastel-green:checked), .bg-swatch--uroko-pastel-green {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(181, 224, 168) 13px, rgb(181, 224, 168) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(181, 224, 168) 13px, rgb(181, 224, 168) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-yellow:checked), .bg-swatch--uroko-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(247, 227, 155) 13px, rgb(247, 227, 155) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(247, 227, 155) 13px, rgb(247, 227, 155) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-red:checked), .bg-swatch--uroko-pastel-red {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(244, 169, 163) 13px, rgb(244, 169, 163) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(244, 169, 163) 13px, rgb(244, 169, 163) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-blue:checked), .bg-swatch--uroko-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 200, 240) 13px, rgb(168, 200, 240) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 200, 240) 13px, rgb(168, 200, 240) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-orange:checked), .bg-swatch--uroko-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(248, 200, 154) 13px, rgb(248, 200, 154) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(248, 200, 154) 13px, rgb(248, 200, 154) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-purple:checked), .bg-swatch--uroko-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 184, 236) 13px, rgb(201, 184, 236) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 184, 236) 13px, rgb(201, 184, 236) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-pink:checked), .bg-swatch--uroko-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(247, 197, 218) 13px, rgb(247, 197, 218) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(247, 197, 218) 13px, rgb(247, 197, 218) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-teal:checked), .bg-swatch--uroko-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(169, 226, 216) 13px, rgb(169, 226, 216) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(169, 226, 216) 13px, rgb(169, 226, 216) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-mono:checked), .bg-swatch--uroko-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 205, 212) 13px, rgb(201, 205, 212) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(201, 205, 212) 13px, rgb(201, 205, 212) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-pastel-black:checked), .bg-swatch--uroko-pastel-black {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(74, 79, 90) 13px, rgb(74, 79, 90) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(74, 79, 90) 13px, rgb(74, 79, 90) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  /* ---------- 鱗文様（宝石10色） ---------- */

  body:has(#bg-uroko-jewel-green:checked), .bg-swatch--uroko-jewel-green {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(14, 122, 95) 13px, rgb(14, 122, 95) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(14, 122, 95) 13px, rgb(14, 122, 95) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-yellow:checked), .bg-swatch--uroko-jewel-yellow {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(184, 134, 11) 13px, rgb(184, 134, 11) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(184, 134, 11) 13px, rgb(184, 134, 11) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-red:checked), .bg-swatch--uroko-jewel-red {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(155, 27, 60) 13px, rgb(155, 27, 60) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(155, 27, 60) 13px, rgb(155, 27, 60) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-blue:checked), .bg-swatch--uroko-jewel-blue {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(30, 63, 143) 13px, rgb(30, 63, 143) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(30, 63, 143) 13px, rgb(30, 63, 143) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-orange:checked), .bg-swatch--uroko-jewel-orange {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(180, 83, 23) 13px, rgb(180, 83, 23) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(180, 83, 23) 13px, rgb(180, 83, 23) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-purple:checked), .bg-swatch--uroko-jewel-purple {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(91, 45, 142) 13px, rgb(91, 45, 142) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(91, 45, 142) 13px, rgb(91, 45, 142) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-pink:checked), .bg-swatch--uroko-jewel-pink {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 51, 110) 13px, rgb(168, 51, 110) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(168, 51, 110) 13px, rgb(168, 51, 110) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-teal:checked), .bg-swatch--uroko-jewel-teal {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(14, 110, 140) 13px, rgb(14, 110, 140) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(14, 110, 140) 13px, rgb(14, 110, 140) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-mono:checked), .bg-swatch--uroko-jewel-mono {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(120, 128, 140) 13px, rgb(120, 128, 140) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(120, 128, 140) 13px, rgb(120, 128, 140) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-uroko-jewel-black:checked), .bg-swatch--uroko-jewel-black {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(70, 75, 85) 13px, rgb(70, 75, 85) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(70, 75, 85) 13px, rgb(70, 75, 85) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  /* ---------- 七宝繋ぎ（あわい10色） ---------- */

  body:has(#bg-shippou-pastel-green:checked), .bg-swatch--shippou-pastel-green {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(181, 224, 168) 17px, rgb(181, 224, 168) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(181, 224, 168) 17px, rgb(181, 224, 168) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-yellow:checked), .bg-swatch--shippou-pastel-yellow {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(247, 227, 155) 17px, rgb(247, 227, 155) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(247, 227, 155) 17px, rgb(247, 227, 155) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-red:checked), .bg-swatch--shippou-pastel-red {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(244, 169, 163) 17px, rgb(244, 169, 163) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(244, 169, 163) 17px, rgb(244, 169, 163) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-blue:checked), .bg-swatch--shippou-pastel-blue {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 200, 240) 17px, rgb(168, 200, 240) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 200, 240) 17px, rgb(168, 200, 240) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-orange:checked), .bg-swatch--shippou-pastel-orange {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(248, 200, 154) 17px, rgb(248, 200, 154) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(248, 200, 154) 17px, rgb(248, 200, 154) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-purple:checked), .bg-swatch--shippou-pastel-purple {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 184, 236) 17px, rgb(201, 184, 236) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 184, 236) 17px, rgb(201, 184, 236) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-pink:checked), .bg-swatch--shippou-pastel-pink {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(247, 197, 218) 17px, rgb(247, 197, 218) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(247, 197, 218) 17px, rgb(247, 197, 218) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-teal:checked), .bg-swatch--shippou-pastel-teal {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(169, 226, 216) 17px, rgb(169, 226, 216) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(169, 226, 216) 17px, rgb(169, 226, 216) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-mono:checked), .bg-swatch--shippou-pastel-mono {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 205, 212) 17px, rgb(201, 205, 212) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(201, 205, 212) 17px, rgb(201, 205, 212) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-pastel-black:checked), .bg-swatch--shippou-pastel-black {
    background-color: #fdfbf6;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(74, 79, 90) 17px, rgb(74, 79, 90) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(74, 79, 90) 17px, rgb(74, 79, 90) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  /* ---------- 七宝繋ぎ（宝石10色） ---------- */

  body:has(#bg-shippou-jewel-green:checked), .bg-swatch--shippou-jewel-green {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(14, 122, 95) 17px, rgb(14, 122, 95) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(14, 122, 95) 17px, rgb(14, 122, 95) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-yellow:checked), .bg-swatch--shippou-jewel-yellow {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(184, 134, 11) 17px, rgb(184, 134, 11) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(184, 134, 11) 17px, rgb(184, 134, 11) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-red:checked), .bg-swatch--shippou-jewel-red {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(155, 27, 60) 17px, rgb(155, 27, 60) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(155, 27, 60) 17px, rgb(155, 27, 60) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-blue:checked), .bg-swatch--shippou-jewel-blue {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(30, 63, 143) 17px, rgb(30, 63, 143) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(30, 63, 143) 17px, rgb(30, 63, 143) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-orange:checked), .bg-swatch--shippou-jewel-orange {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(180, 83, 23) 17px, rgb(180, 83, 23) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(180, 83, 23) 17px, rgb(180, 83, 23) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-purple:checked), .bg-swatch--shippou-jewel-purple {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(91, 45, 142) 17px, rgb(91, 45, 142) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(91, 45, 142) 17px, rgb(91, 45, 142) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-pink:checked), .bg-swatch--shippou-jewel-pink {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 51, 110) 17px, rgb(168, 51, 110) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(168, 51, 110) 17px, rgb(168, 51, 110) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-teal:checked), .bg-swatch--shippou-jewel-teal {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(14, 110, 140) 17px, rgb(14, 110, 140) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(14, 110, 140) 17px, rgb(14, 110, 140) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-mono:checked), .bg-swatch--shippou-jewel-mono {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(120, 128, 140) 17px, rgb(120, 128, 140) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(120, 128, 140) 17px, rgb(120, 128, 140) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-shippou-jewel-black:checked), .bg-swatch--shippou-jewel-black {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(70, 75, 85) 17px, rgb(70, 75, 85) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(70, 75, 85) 17px, rgb(70, 75, 85) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  /* ---------- ピンホイール（あわい10色） ---------- */

  body:has(#bg-pinwheel-pastel-green:checked), .bg-swatch--pinwheel-pastel-green {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(181, 224, 168, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(181, 224, 168, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(181, 224, 168, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(181, 224, 168, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-yellow:checked), .bg-swatch--pinwheel-pastel-yellow {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(247, 227, 155, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(247, 227, 155, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(247, 227, 155, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(247, 227, 155, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-red:checked), .bg-swatch--pinwheel-pastel-red {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(244, 169, 163, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(244, 169, 163, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(244, 169, 163, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(244, 169, 163, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-blue:checked), .bg-swatch--pinwheel-pastel-blue {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(168, 200, 240, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(168, 200, 240, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(168, 200, 240, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(168, 200, 240, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-orange:checked), .bg-swatch--pinwheel-pastel-orange {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(248, 200, 154, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(248, 200, 154, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(248, 200, 154, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(248, 200, 154, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-purple:checked), .bg-swatch--pinwheel-pastel-purple {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(201, 184, 236, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(201, 184, 236, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(201, 184, 236, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(201, 184, 236, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-pink:checked), .bg-swatch--pinwheel-pastel-pink {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(247, 197, 218, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(247, 197, 218, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(247, 197, 218, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(247, 197, 218, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-teal:checked), .bg-swatch--pinwheel-pastel-teal {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(169, 226, 216, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(169, 226, 216, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(169, 226, 216, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(169, 226, 216, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-mono:checked), .bg-swatch--pinwheel-pastel-mono {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(201, 205, 212, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(201, 205, 212, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(201, 205, 212, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(201, 205, 212, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-pastel-black:checked), .bg-swatch--pinwheel-pastel-black {
    background-color: #fdfbf6;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(74, 79, 90, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(74, 79, 90, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(74, 79, 90, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(74, 79, 90, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  /* ---------- ピンホイール（宝石10色） ---------- */

  body:has(#bg-pinwheel-jewel-green:checked), .bg-swatch--pinwheel-jewel-green {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(14, 122, 95, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(14, 122, 95, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(14, 122, 95, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(14, 122, 95, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-yellow:checked), .bg-swatch--pinwheel-jewel-yellow {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(184, 134, 11, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(184, 134, 11, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(184, 134, 11, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(184, 134, 11, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-red:checked), .bg-swatch--pinwheel-jewel-red {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(155, 27, 60, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(155, 27, 60, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(155, 27, 60, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(155, 27, 60, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-blue:checked), .bg-swatch--pinwheel-jewel-blue {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(30, 63, 143, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(30, 63, 143, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(30, 63, 143, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(30, 63, 143, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-orange:checked), .bg-swatch--pinwheel-jewel-orange {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(180, 83, 23, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(180, 83, 23, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(180, 83, 23, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(180, 83, 23, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-purple:checked), .bg-swatch--pinwheel-jewel-purple {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(91, 45, 142, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(91, 45, 142, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(91, 45, 142, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(91, 45, 142, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-pink:checked), .bg-swatch--pinwheel-jewel-pink {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(168, 51, 110, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(168, 51, 110, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(168, 51, 110, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(168, 51, 110, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-teal:checked), .bg-swatch--pinwheel-jewel-teal {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(14, 110, 140, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(14, 110, 140, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(14, 110, 140, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(14, 110, 140, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-mono:checked), .bg-swatch--pinwheel-jewel-mono {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(120, 128, 140, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(120, 128, 140, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(120, 128, 140, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(120, 128, 140, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  body:has(#bg-pinwheel-jewel-black:checked), .bg-swatch--pinwheel-jewel-black {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(70, 75, 85, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(70, 75, 85, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(70, 75, 85, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(70, 75, 85, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  /* ---------- 千鳥格子（本物・織り理論ベース／4パレット40色） ---------- */
  body:has(#bg-dogtooth-green:checked), .bg-swatch--dogtooth-green {
    background-color: #f6faf1;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f6faf1'/><path fill='%236fae2f' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-yellow:checked), .bg-swatch--dogtooth-yellow {
    background-color: #fffbf0;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fffbf0'/><path fill='%23f2b705' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-red:checked), .bg-swatch--dogtooth-red {
    background-color: #fff5f5;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fff5f5'/><path fill='%23e5383b' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-blue:checked), .bg-swatch--dogtooth-blue {
    background-color: #f0f5ff;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f0f5ff'/><path fill='%232255d1' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-orange:checked), .bg-swatch--dogtooth-orange {
    background-color: #fff4ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fff4ec'/><path fill='%23e8720c' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-purple:checked), .bg-swatch--dogtooth-purple {
    background-color: #f7f0fc;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f7f0fc'/><path fill='%237c3aed' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pink:checked), .bg-swatch--dogtooth-pink {
    background-color: #fdf0f7;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdf0f7'/><path fill='%23e8368f' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-teal:checked), .bg-swatch--dogtooth-teal {
    background-color: #eafbfd;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23eafbfd'/><path fill='%2312b6c9' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-mono:checked), .bg-swatch--dogtooth-mono {
    background-color: #f5f5f4;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f5f5f4'/><path fill='%236b7280' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-black:checked), .bg-swatch--dogtooth-black {
    background-color: #fafafa;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fafafa'/><path fill='%2314161a' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-green:checked), .bg-swatch--dogtooth-smoky-green {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%238ba888' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-yellow:checked), .bg-swatch--dogtooth-smoky-yellow {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%23c9a84c' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-red:checked), .bg-swatch--dogtooth-smoky-red {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%23c07059' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-blue:checked), .bg-swatch--dogtooth-smoky-blue {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%236b87a8' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-orange:checked), .bg-swatch--dogtooth-smoky-orange {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%23c68a5a' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-purple:checked), .bg-swatch--dogtooth-smoky-purple {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%239a86a8' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-pink:checked), .bg-swatch--dogtooth-smoky-pink {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%23c98d96' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-teal:checked), .bg-swatch--dogtooth-smoky-teal {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%237aa8a1' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-mono:checked), .bg-swatch--dogtooth-smoky-mono {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%23a8a29a' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-smoky-black:checked), .bg-swatch--dogtooth-smoky-black {
    background-color: #f4f1ec;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23f4f1ec'/><path fill='%233a3d3f' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-green:checked), .bg-swatch--dogtooth-pastel-green {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23b5e0a8' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-yellow:checked), .bg-swatch--dogtooth-pastel-yellow {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23f7e39b' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-red:checked), .bg-swatch--dogtooth-pastel-red {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23f4a9a3' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-blue:checked), .bg-swatch--dogtooth-pastel-blue {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23a8c8f0' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-orange:checked), .bg-swatch--dogtooth-pastel-orange {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23f8c89a' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-purple:checked), .bg-swatch--dogtooth-pastel-purple {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23c9b8ec' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-pink:checked), .bg-swatch--dogtooth-pastel-pink {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23f7c5da' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-teal:checked), .bg-swatch--dogtooth-pastel-teal {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23a9e2d8' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-mono:checked), .bg-swatch--dogtooth-pastel-mono {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%23c9cdd4' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-pastel-black:checked), .bg-swatch--dogtooth-pastel-black {
    background-color: #fdfbf6;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fdfbf6'/><path fill='%234a4f5a' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-green:checked), .bg-swatch--dogtooth-jewel-green {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%230e7a5f' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-yellow:checked), .bg-swatch--dogtooth-jewel-yellow {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%23b8860b' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-red:checked), .bg-swatch--dogtooth-jewel-red {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%239b1b3c' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-blue:checked), .bg-swatch--dogtooth-jewel-blue {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%231e3f8f' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-orange:checked), .bg-swatch--dogtooth-jewel-orange {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%23b45317' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-purple:checked), .bg-swatch--dogtooth-jewel-purple {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%235b2d8e' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-pink:checked), .bg-swatch--dogtooth-jewel-pink {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%23a8336e' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-teal:checked), .bg-swatch--dogtooth-jewel-teal {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%230e6e8c' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-mono:checked), .bg-swatch--dogtooth-jewel-mono {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%2378808c' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dogtooth-jewel-black:checked), .bg-swatch--dogtooth-jewel-black {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%23464b55' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  /* ---------- 全形状「黒×金」共通1色 ---------- */
  body:has(#bg-dogtooth-goldblack:checked), .bg-swatch--dogtooth-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%2314161a'/><path fill='%23f2c14e' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dots-goldblack:checked), .bg-swatch--dots-goldblack {
    background-color: #14161a;
    background-image: radial-gradient(circle, rgba(242, 193, 78, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-stripe-goldblack:checked), .bg-swatch--stripe-goldblack {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(242, 193, 78, 0.18) 0px, rgba(242, 193, 78, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-graph-goldblack:checked), .bg-swatch--graph-goldblack {
    background-color: #14161a;
    background-image:
      linear-gradient(rgba(242, 193, 78, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242, 193, 78, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-bubbles-goldblack:checked), .bg-swatch--bubbles-goldblack {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(242, 193, 78, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(242, 193, 78, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(242, 193, 78, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(242, 193, 78, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(242, 193, 78, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(242, 193, 78, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-argyle-goldblack:checked), .bg-swatch--argyle-goldblack {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(45deg, rgba(242, 193, 78, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(242, 193, 78, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-checker-goldblack:checked), .bg-swatch--checker-goldblack {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(242, 193, 78, 0.14) 25%, transparent 25%, transparent 75%, rgba(242, 193, 78, 0.14) 75%),
      linear-gradient(45deg, rgba(242, 193, 78, 0.14) 25%, transparent 25%, transparent 75%, rgba(242, 193, 78, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-topo-goldblack:checked), .bg-swatch--topo-goldblack {
    background-color: #14161a;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(242, 193, 78, 0.24) 15px, rgba(242, 193, 78, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(242, 193, 78, 0.18) 19px, rgba(242, 193, 78, 0.18) 20px);
  }

  body:has(#bg-sparkle-goldblack:checked), .bg-swatch--sparkle-goldblack {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(242, 193, 78, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(242, 193, 78, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(242, 193, 78, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(242, 193, 78, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(242, 193, 78, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(242, 193, 78, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(242, 193, 78, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-crosshatch-goldblack:checked), .bg-swatch--crosshatch-goldblack {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(60deg, rgba(242, 193, 78, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(242, 193, 78, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-herringbone-goldblack:checked), .bg-swatch--herringbone-goldblack {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(242, 193, 78, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(242, 193, 78, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-chevron-goldblack:checked), .bg-swatch--chevron-goldblack {
    background-color: #14161a;
    background-image:
      linear-gradient(135deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(242, 193, 78, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-wave-goldblack:checked), .bg-swatch--wave-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23f2c14e' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-brick-goldblack:checked), .bg-swatch--brick-goldblack {
    background-color: #f2c14e;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #14161a 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #14161a 0);
    background-size: 58px 29px;
  }

  body:has(#bg-gingham-goldblack:checked), .bg-swatch--gingham-goldblack {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(242, 193, 78, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(242, 193, 78, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-cross-goldblack:checked), .bg-swatch--cross-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23f2c14e' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-stitch-goldblack:checked), .bg-swatch--stitch-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23f2c14e' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-grain-goldblack:checked), .bg-swatch--grain-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.949 0 0 0 0 0.757 0 0 0 0 0.306 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-circuit-goldblack:checked), .bg-swatch--circuit-goldblack {
    background-color: #14161a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23f2c14e' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23f2c14e'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-houndstooth-goldblack:checked), .bg-swatch--houndstooth-goldblack {
    background-color: #14161a;
    background-image:
      linear-gradient(45deg, rgb(242, 193, 78) 25%, transparent 25%, transparent 75%, rgb(242, 193, 78) 75%, rgb(242, 193, 78)),
      linear-gradient(45deg, rgb(242, 193, 78) 25%, transparent 25%, transparent 75%, rgb(242, 193, 78) 75%, rgb(242, 193, 78)),
      linear-gradient(-45deg, rgb(242, 193, 78) 25%, #14161a 25%, #14161a 75%, rgb(242, 193, 78) 75%, rgb(242, 193, 78));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-tartan-goldblack:checked), .bg-swatch--tartan-goldblack {
    background-color: #14161a;
    background-image:
      repeating-linear-gradient(90deg, rgba(242, 193, 78, 0.28) 0 10px, transparent 10px 20px, rgba(242, 193, 78, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(242, 193, 78, 0.28) 0 10px, transparent 10px 20px, rgba(242, 193, 78, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-denim-goldblack:checked), .bg-swatch--denim-goldblack {
    background-color: #14161a;
    background-image: repeating-linear-gradient(45deg, rgba(242, 193, 78, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-seigaiha-goldblack:checked), .bg-swatch--seigaiha-goldblack {
    background-color: #14161a;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23f2c14e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f2c14e'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%2314161a'/><g fill='none' stroke='%23f2c14e' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23f2c14e'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-uroko-goldblack:checked), .bg-swatch--uroko-goldblack {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(242, 193, 78) 13px, rgb(242, 193, 78) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgb(242, 193, 78) 13px, rgb(242, 193, 78) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-shippou-goldblack:checked), .bg-swatch--shippou-goldblack {
    background-color: #14161a;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(242, 193, 78) 17px, rgb(242, 193, 78) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgb(242, 193, 78) 17px, rgb(242, 193, 78) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-pinwheel-goldblack:checked), .bg-swatch--pinwheel-goldblack {
    background-color: #14161a;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(242, 193, 78, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(242, 193, 78, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(242, 193, 78, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(242, 193, 78, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  /* ---------- 全形状「白×金」共通1色 ---------- */
  body:has(#bg-dogtooth-goldwhite:checked), .bg-swatch--dogtooth-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 8 8'><rect width='8' height='8' fill='%23fefdf9'/><path fill='%23c9a227' d='M4,0L8,4L6,4L4,2L4,4L2,4L4,6L4,8L0,4L0,0ZM6,0L8,0L8,2ZM0,6L2,8L0,8Z'/></svg>");
    background-size: 48px 48px;
  }

  body:has(#bg-dots-goldwhite:checked), .bg-swatch--dots-goldwhite {
    background-color: #fefdf9;
    background-image: radial-gradient(circle, rgba(201, 162, 39, 0.32) 1.6px, transparent 1.8px);
    background-size: 22px 22px;
  }

  body:has(#bg-stripe-goldwhite:checked), .bg-swatch--stripe-goldwhite {
    background-color: #fefdf9;
    background-image: repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.18) 0px, rgba(201, 162, 39, 0.18) 10px, transparent 10px, transparent 24px);
  }

  body:has(#bg-graph-goldwhite:checked), .bg-swatch--graph-goldwhite {
    background-color: #fefdf9;
    background-image:
      linear-gradient(rgba(201, 162, 39, 0.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201, 162, 39, 0.16) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  body:has(#bg-bubbles-goldwhite:checked), .bg-swatch--bubbles-goldwhite {
    background-color: #fefdf9;
    background-image:
      radial-gradient(circle at 15% 25%, rgba(201, 162, 39, 0.26) 0 22px, transparent 23px),
      radial-gradient(circle at 70% 15%, rgba(201, 162, 39, 0.18) 0 14px, transparent 15px),
      radial-gradient(circle at 40% 60%, rgba(201, 162, 39, 0.22) 0 30px, transparent 31px),
      radial-gradient(circle at 85% 70%, rgba(201, 162, 39, 0.16) 0 18px, transparent 19px),
      radial-gradient(circle at 10% 85%, rgba(201, 162, 39, 0.24) 0 16px, transparent 17px),
      radial-gradient(circle at 55% 30%, rgba(201, 162, 39, 0.14) 0 10px, transparent 11px);
    background-size: 260px 260px;
  }

  body:has(#bg-argyle-goldwhite:checked), .bg-swatch--argyle-goldwhite {
    background-color: #fefdf9;
    background-image:
      repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.2) 0 2px, transparent 2px 40px),
      repeating-linear-gradient(-45deg, rgba(201, 162, 39, 0.2) 0 2px, transparent 2px 40px);
  }

  body:has(#bg-checker-goldwhite:checked), .bg-swatch--checker-goldwhite {
    background-color: #fefdf9;
    background-image:
      linear-gradient(45deg, rgba(201, 162, 39, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.14) 75%),
      linear-gradient(45deg, rgba(201, 162, 39, 0.14) 25%, transparent 25%, transparent 75%, rgba(201, 162, 39, 0.14) 75%);
    background-size: 56px 56px;
    background-position: 0 0, 28px 28px;
  }

  body:has(#bg-topo-goldwhite:checked), .bg-swatch--topo-goldwhite {
    background-color: #fefdf9;
    background-image:
      repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 14px, rgba(201, 162, 39, 0.24) 15px, rgba(201, 162, 39, 0.24) 16px),
      repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 18px, rgba(201, 162, 39, 0.18) 19px, rgba(201, 162, 39, 0.18) 20px);
  }

  body:has(#bg-sparkle-goldwhite:checked), .bg-swatch--sparkle-goldwhite {
    background-color: #fefdf9;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(201, 162, 39, 0.75) 0 1.5px, transparent 2px),
      radial-gradient(circle at 32% 55%, rgba(201, 162, 39, 0.65) 0 1px, transparent 1.5px),
      radial-gradient(circle at 60% 22%, rgba(201, 162, 39, 0.75) 0 1.8px, transparent 2.3px),
      radial-gradient(circle at 78% 65%, rgba(201, 162, 39, 0.55) 0 1px, transparent 1.5px),
      radial-gradient(circle at 45% 80%, rgba(201, 162, 39, 0.7) 0 1.4px, transparent 1.9px),
      radial-gradient(circle at 90% 30%, rgba(201, 162, 39, 0.65) 0 1.2px, transparent 1.7px),
      radial-gradient(circle at 20% 90%, rgba(201, 162, 39, 0.6) 0 1px, transparent 1.5px);
    background-size: 180px 180px;
  }

  body:has(#bg-crosshatch-goldwhite:checked), .bg-swatch--crosshatch-goldwhite {
    background-color: #fefdf9;
    background-image:
      repeating-linear-gradient(60deg, rgba(201, 162, 39, 0.2) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(-60deg, rgba(201, 162, 39, 0.2) 0 1px, transparent 1px 12px);
  }

  body:has(#bg-herringbone-goldwhite:checked), .bg-swatch--herringbone-goldwhite {
    background-color: #fefdf9;
    background-image:
      linear-gradient(45deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(201, 162, 39, 0.3) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(201, 162, 39, 0.3) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }

  body:has(#bg-chevron-goldwhite:checked), .bg-swatch--chevron-goldwhite {
    background-color: #fefdf9;
    background-image:
      linear-gradient(135deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%),
      linear-gradient(225deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%),
      linear-gradient(315deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%),
      linear-gradient(45deg, rgba(201, 162, 39, 0.3) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
  }

  body:has(#bg-wave-goldwhite:checked), .bg-swatch--wave-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0,10 Q10,0 20,10 T40,10' fill='none' stroke='%23c9a227' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 40px 20px;
  }

  body:has(#bg-brick-goldwhite:checked), .bg-swatch--brick-goldwhite {
    background-color: #c9a227;
    background-image:
      linear-gradient(90deg, transparent calc(100% - 3px), #fefdf9 0),
      linear-gradient(0deg, transparent calc(100% - 3px), #fefdf9 0);
    background-size: 58px 29px;
  }

  body:has(#bg-gingham-goldwhite:checked), .bg-swatch--gingham-goldwhite {
    background-color: #fefdf9;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 162, 39, 0.22) 0 10px, transparent 10px 24px),
      repeating-linear-gradient(0deg, rgba(201, 162, 39, 0.22) 0 10px, transparent 10px 24px);
  }

  body:has(#bg-cross-goldwhite:checked), .bg-swatch--cross-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,7 L12,17 M7,12 L17,12' stroke='%23c9a227' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  body:has(#bg-stitch-goldwhite:checked), .bg-swatch--stitch-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='28'%3E%3Cline x1='0' y1='14' x2='16' y2='14' stroke='%23c9a227' stroke-width='2' stroke-dasharray='4 4'/%3E%3C/svg%3E");
    background-size: 16px 28px;
  }

  body:has(#bg-grain-goldwhite:checked), .bg-swatch--grain-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.788 0 0 0 0 0.635 0 0 0 0 0.153 0 0 0 0.28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
  }

  body:has(#bg-circuit-goldwhite:checked), .bg-swatch--circuit-goldwhite {
    background-color: #fefdf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='2'%3E%3Cpath d='M0,20 H14 V6 H26 V34 H40'/%3E%3C/g%3E%3Cg fill='%23c9a227'%3E%3Ccircle cx='14' cy='20' r='2.5'/%3E%3Ccircle cx='14' cy='6' r='2.5'/%3E%3Ccircle cx='26' cy='34' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 40px 40px;
  }

  body:has(#bg-houndstooth-goldwhite:checked), .bg-swatch--houndstooth-goldwhite {
    background-color: #fefdf9;
    background-image:
      linear-gradient(45deg, rgb(201, 162, 39) 25%, transparent 25%, transparent 75%, rgb(201, 162, 39) 75%, rgb(201, 162, 39)),
      linear-gradient(45deg, rgb(201, 162, 39) 25%, transparent 25%, transparent 75%, rgb(201, 162, 39) 75%, rgb(201, 162, 39)),
      linear-gradient(-45deg, rgb(201, 162, 39) 25%, #fefdf9 25%, #fefdf9 75%, rgb(201, 162, 39) 75%, rgb(201, 162, 39));
    background-position: 0 0, 16px 16px, 16px 16px;
    background-size: 32px 32px;
  }

  body:has(#bg-tartan-goldwhite:checked), .bg-swatch--tartan-goldwhite {
    background-color: #fefdf9;
    background-image:
      repeating-linear-gradient(90deg, rgba(201, 162, 39, 0.28) 0 10px, transparent 10px 20px, rgba(201, 162, 39, 0.16) 20px 24px, transparent 24px 44px),
      repeating-linear-gradient(0deg, rgba(201, 162, 39, 0.28) 0 10px, transparent 10px 20px, rgba(201, 162, 39, 0.16) 20px 24px, transparent 24px 44px);
  }

  body:has(#bg-denim-goldwhite:checked), .bg-swatch--denim-goldwhite {
    background-color: #fefdf9;
    background-image: repeating-linear-gradient(45deg, rgba(201, 162, 39, 0.35) 0 2px, transparent 2px 5px);
  }

  body:has(#bg-seigaiha-goldwhite:checked), .bg-swatch--seigaiha-goldwhite {
    background-color: #fefdf9;
    background-image:
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fefdf9'/><g fill='none' stroke='%23c9a227' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9a227'/></svg>"),
      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='34'><path d='M0,34A30,30 0 0 1 60,34L60,34 0,34Z' fill='%23fefdf9'/><g fill='none' stroke='%23c9a227' stroke-width='5'><path d='M17,34A13,13 0 0 1 43,34'/><path d='M10,34A20,20 0 0 1 50,34'/><path d='M3,34A27,27 0 0 1 57,34'/></g><path d='M24,34A6,6 0 0 1 36,34L30,34Z' fill='%23c9a227'/></svg>");
    background-size: 60px 34px, 60px 34px;
    background-position: 0 0, 30px 17px;
  }

  body:has(#bg-uroko-goldwhite:checked), .bg-swatch--uroko-goldwhite {
    background-color: #fefdf9;
    background-image:
      radial-gradient(circle at 50% 0%, transparent 12px, rgba(201, 162, 39, 0.4) 13px, rgba(201, 162, 39, 0.4) 15px, transparent 16px),
      radial-gradient(circle at 50% 0%, transparent 12px, rgba(201, 162, 39, 0.4) 13px, rgba(201, 162, 39, 0.4) 15px, transparent 16px);
    background-size: 30px 26px;
    background-position: 0 0, 15px 13px;
  }

  body:has(#bg-shippou-goldwhite:checked), .bg-swatch--shippou-goldwhite {
    background-color: #fefdf9;
    background-image:
      radial-gradient(circle at 50% 50%, transparent 16px, rgba(201, 162, 39, 0.4) 17px, rgba(201, 162, 39, 0.4) 19px, transparent 20px),
      radial-gradient(circle at 50% 50%, transparent 16px, rgba(201, 162, 39, 0.4) 17px, rgba(201, 162, 39, 0.4) 19px, transparent 20px);
    background-size: 36px 36px;
    background-position: 0 0, 18px 18px;
  }

  body:has(#bg-pinwheel-goldwhite:checked), .bg-swatch--pinwheel-goldwhite {
    background-color: #fefdf9;
    background-image: conic-gradient(from 0deg at 50% 50%, rgba(201, 162, 39, 0.42) 0deg 40deg, transparent 40deg 90deg, rgba(201, 162, 39, 0.42) 90deg 130deg, transparent 130deg 180deg, rgba(201, 162, 39, 0.42) 180deg 220deg, transparent 220deg 270deg, rgba(201, 162, 39, 0.42) 270deg 310deg, transparent 310deg 360deg);
    background-size: 40px 40px;
  }

  .bg-picker { position: relative; display: inline-block; }
  .bg-picker__backdrop {
    position: fixed; inset: 0; z-index: 39;
    display: none;
  }
  .bg-picker:has(#bg-panel-toggle:checked) .bg-picker__backdrop { display: block; }
  .bg-picker__panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    z-index: 40;
    background: var(--neu-bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(480px, calc(100vw - 48px));
    max-height: min(480px, 70vh);
    overflow-y: auto;
    box-shadow: 0 14px 34px rgba(20,32,26,0.18);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    pointer-events: none;
  }
  .bg-picker:has(#bg-panel-toggle:checked) .bg-picker__panel {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
  }
  .bg-search {
    width: 100%;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--ink);
    background: var(--bg-panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px;
  }
  .bg-search::placeholder { color: var(--ink-faint); }
  .bg-count {
    margin: -6px 0 0;
    padding: 0 4px;
    font-size: 0.72rem;
    color: var(--ink-faint);
    text-align: right;
  }
  .bg-shelf__label {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-faint);
    margin: 0 0 8px;
  }
  .bg-shelf__row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }
  .bg-option {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    cursor: pointer; width: 76px; flex-shrink: 0;
    scroll-snap-align: start;
  }
  .bg-swatch {
    position: relative;
    width: 68px; height: 50px;
    border-radius: 10px;
    border: 2px solid var(--line);
    transition: border-color 0.15s ease;
  }
  .bg-option:has(.bg-radio:checked) .bg-swatch { border-color: var(--lime); }
  /* タイルが大きい柄はスウォッチだと模様がほぼ見えないため、プレビューだけ縮小表示 */
  .bg-swatch--pat-terrazzo, .bg-swatch--pat-concrete,
  [class*="bg-swatch--bubbles-"], [class*="bg-swatch--sparkle-"],
  [class*="bg-swatch--animal-"] { background-size: 70px 70px !important; }
  .bg-option__name { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); text-align: center; }
  /* 「動く」バッジ：bg-option--animated を付けたスウォッチの右上に⟳を表示 */
  .bg-option--animated .bg-swatch::after {
    content: "⟳";
    position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lime);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  }
  /* .app-links a/label のニューモーフィズム装飾（background/box-shadow/padding/border-radius）を、
     パネル内側の要素（選択肢ラベル・背景クリック用バックドロップ）だけ打ち消す */
  .bg-picker .bg-option,
  .bg-picker .bg-picker__backdrop {
    background: none; box-shadow: none; border: none; border-radius: 0; padding: 0;
  }
  .bg-picker .bg-option:hover,
  .bg-picker .bg-picker__backdrop:hover {
    box-shadow: none; transform: none;
  }