/* Compound Gradient — 画面の見た目。近白基調。色はここの変数だけを使う。 */

:root {
  --bg:        #F7F7F9;   /* いちばん下の面 */
  --surface:   #FFFFFF;   /* パネル・カードの面 */
  --ink:       #17171B;   /* 文字 */
  --weak:      #6B6B76;   /* 弱い文字 */
  --line:      #E4E4EA;   /* 境界 */
  --accent:    #E8552D;   /* 効かせ色 */
  --accent-bg: rgba(232,85,45,.10);
  --stage:     #EAEAEE;   /* プレビューの外側（明るい中間灰） */
  --stage-2:   #DFDFE5;   /* 外側ほど少し沈めて、白い絵でも枠が分かる */
  --on-stage:  #4A4A55;   /* プレビューの外側に置く文字 */

  --r:    10px;
  --r-sm: 7px;
  --r-xs: 5px;

  --sh-1: 0 1px 2px rgba(0,0,0,.06);
  --sh-2: 0 8px 24px rgba(0,0,0,.10);
  --sh-3: 0 16px 44px rgba(0,0,0,.18);

  --t:  170ms cubic-bezier(.2,.7,.3,1);
  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);

  --left:  236px;
  --right: 304px;
  --bar:   54px;
  --strip: 66px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body { overflow: hidden; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent-bg); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 起動中 / 失敗 ---------- */
.boot {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  color: var(--weak); font-size: 13px;
}
.boot-error { color: var(--accent); padding: 24px; text-align: center; }

/* ---------- 全体の配置 ---------- */
.app {
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--left) minmax(0,1fr) var(--right);
  grid-template-rows: auto minmax(0,1fr) var(--strip);
  grid-template-areas:
    "bar  bar   bar"
    "left stage right"
    "strip strip strip";
  background: var(--bg);
}
.app > .topbar   { grid-area: bar; }
.app > .col-left { grid-area: left; }
.app > .stage    { grid-area: stage; }
.app > .col-right{ grid-area: right; }
.app > .colorbar { grid-area: strip; }

/* ---------- 上のバー ---------- */
.topbar {
  min-height: var(--bar);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand {
  font-size: 15px; font-weight: 640; letter-spacing: 0;
  display: flex; align-items: center; gap: 7px; padding-right: 4px;
  white-space: nowrap;
}
.brand .mark {
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FFD36E, var(--accent) 62%, #C7371A);
}
.bar-sp { flex: 1 1 12px; min-width: 0; }
.bar-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-div { width: 1px; height: 22px; background: var(--line); flex: none; }
.bar-br { display: none; width: 100%; height: 0; }

/* ---------- 部品: ボタン ---------- */
.btn {
  appearance: none; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  height: 30px; padding: 0 11px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 520; white-space: nowrap;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast), border-color var(--t-fast), transform 90ms ease, box-shadow var(--t-fast);
}
.btn:hover { background: #FAFAFC; border-color: #D6D6DE; }
.btn:active { transform: translateY(1px); background: #F2F2F5; }
.btn[disabled] { opacity: .38; cursor: default; transform: none; }
.btn[disabled]:hover { background: var(--surface); border-color: var(--line); }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.14);
}
.btn-primary:hover { background: #F05E36; border-color: #F05E36; }
.btn-primary:active { background: #D64A24; border-color: #D64A24; }

.btn-sm { height: 26px; padding: 0 8px; font-size: 11.5px; }
.btn-icon { width: 30px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 26px; }
.btn-on { background: var(--accent-bg); border-color: rgba(232,85,45,.42); color: #B33F1C; }

/* ランダムの3つ（ランダム／色だけ／形だけ）は、地続きの1つの操作として見せる */
.bar-rnd { gap: 0; }
.rnd-main { font-weight: 600; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.rnd-part {
  height: 30px; font-size: 11.5px; padding: 0 9px;
  border-radius: 0; border-left-color: transparent;
  box-shadow: inset 1px 0 0 var(--line); color: var(--weak);
}
.rnd-part:hover { color: var(--ink); }
.rnd-part:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.btn .caret { font-size: 9px; color: var(--weak); }
.btn-primary .caret { color: rgba(255,255,255,.8); }

/* ---------- 部品: 入力 ---------- */
.inp {
  appearance: none; -webkit-appearance: none;
  height: 30px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 0 9px; font-size: 12.5px;
  min-width: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.inp:focus { border-color: #B9B9C4; box-shadow: 0 0 0 3px rgba(0,0,0,.05); outline: none; }
.inp-num { width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.inp-num::-webkit-outer-spin-button, .inp-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inp-num { -moz-appearance: textfield; }
.dim-x { color: var(--weak); font-size: 12px; }

/* ---------- 左の列 ---------- */
.col-left, .col-right {
  background: var(--surface);
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}
.col-left {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow: hidden;
}
/* 型の一覧と見本はそれぞれ自分の中でスクロールし、保存した物は列の下に貼りついて常に見える。
   min-height:0 を入れないと、中身の高さのぶんだけ箱が伸びて列からはみ出す（flexの既定は縮まない）。 */
.sec-looks {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-bottom: 10px;
}
.sec-presets {
  flex: 1 1 auto; min-height: 0; max-height: 44%; overflow-y: auto; scrollbar-width: thin;
  border-top: 1px solid var(--line); padding-bottom: 10px;
}
.sec-presets .sec-head {
  position: sticky; top: 0; background: var(--surface); z-index: 2;
  padding-top: 2px; margin-top: -2px;
}
.sec-saves {
  flex: 0 0 auto; max-height: 34%; overflow-y: auto; scrollbar-width: thin;
  margin-top: 0; border-top: 1px solid var(--line); background: var(--surface);
}
.sec-looks::-webkit-scrollbar, .sec-saves::-webkit-scrollbar, .sec-presets::-webkit-scrollbar { width: 9px; }
.sec-looks::-webkit-scrollbar-thumb, .sec-saves::-webkit-scrollbar-thumb, .sec-presets::-webkit-scrollbar-thumb {
  background: #DDDDE4; border-radius: 6px; border: 3px solid var(--surface);
}
.sec-saves .sec-head { position: sticky; top: 0; background: var(--surface); z-index: 2; padding-top: 2px; margin-top: -2px; }
.col-right { border-left: 1px solid var(--line); }

.col-left::-webkit-scrollbar, .col-right::-webkit-scrollbar { width: 9px; }
.col-left::-webkit-scrollbar-thumb, .col-right::-webkit-scrollbar-thumb {
  background: #DDDDE4; border-radius: 6px; border: 3px solid var(--surface);
}

.sec { padding: 12px 12px 4px; }
.sec + .sec { border-top: 1px solid var(--line); margin-top: 6px; }
.sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 620; color: var(--weak);
  margin: 0 0 9px; text-transform: none;
}

/* 型の一覧 */
.looks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.look {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 0; cursor: pointer; overflow: hidden;
  text-align: left; display: block; position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform 90ms ease;
}
.look:hover { border-color: #C9C9D3; box-shadow: var(--sh-1); }
.look:active { transform: translateY(1px); }
.look canvas { display: block; width: 100%; height: 52px; background: #EFEFF3; }
.look .nm {
  display: block; padding: 5px 7px 6px; font-size: 11.5px; font-weight: 540;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.look .kb {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 4px;
  font-size: 9.5px; line-height: 1; padding: 3px 4px;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity var(--t-fast);
}
.looks:hover .look .kb { opacity: 1; }
.look[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.look[aria-pressed="true"] .nm { color: #B33F1C; }

/* 見本（presets.js の完成品を押せる形で並べる） */
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.preset {
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-sm); padding: 0; cursor: pointer; overflow: hidden;
  text-align: left; display: block; position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform 90ms ease;
}
.preset:hover { border-color: #C9C9D3; box-shadow: var(--sh-1); }
.preset:active { transform: translateY(1px); }
.preset canvas { display: block; width: 100%; height: 108px; background: #EFEFF3; object-fit: cover; }
.preset .nm {
  display: block; padding: 5px 7px 6px; font-size: 11.5px; font-weight: 540;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 保存した物 */
.save-row { display: flex; gap: 6px; margin-bottom: 9px; }
.save-row .inp { flex: 1 1 auto; }
.items { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.item {
  display: flex; align-items: center; gap: 8px; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform 90ms ease;
}
.item:hover { border-color: #C9C9D3; background: #FBFBFD; }
.item:active { transform: translateY(1px); }
.item canvas { width: 34px; height: 46px; border-radius: 4px; flex: none; background: #EFEFF3; display: block; }
.item .meta { min-width: 0; flex: 1 1 auto; }
.item .t { font-size: 12px; font-weight: 540; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .s {
  font-size: 10.5px; color: var(--weak); font-variant-numeric: tabular-nums;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.item-acts { display: flex; flex-direction: column; gap: 3px; flex: none; }
.mini {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 22px; height: 20px; border-radius: 4px; color: #A9A9B4; font-size: 12px;
  display: grid; place-items: center; padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.mini:hover { background: #F0F0F4; color: var(--ink); }
.mini.on { color: var(--accent); }
.mini.lockb { width: auto; padding: 0 6px; font-size: 10.5px; font-weight: 560; letter-spacing: 0; }
.mini.lockb.on { background: var(--accent-bg); }
.empty { color: var(--weak); font-size: 11.5px; padding: 4px 0 14px; }

/* ---------- 中央（プレビュー） ---------- */
.stage {
  position: relative; min-width: 0; min-height: 0;
  background:
    radial-gradient(1200px 700px at 50% 42%, var(--stage) 0%, var(--stage-2) 100%);
  display: grid; place-items: center; padding: 22px;
  overflow: hidden;
}
.frame {
  position: relative; border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.16);
  transition: width var(--t), height var(--t);
  will-change: width, height;
}
/* 白い絵でも明るい下地から浮くように、内側にごく細い輪郭を1本置く */
.frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  pointer-events: none; z-index: 2;
}
.frame canvas.gl { display: block; border-radius: 3px; width: 100%; height: 100%; }
.frame canvas.tx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 3px; }

.stage-note {
  position: absolute; left: 10px; bottom: 8px;
  font-size: 11px; color: var(--weak);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  display: flex; gap: 10px; align-items: center;
  pointer-events: none;
  background: rgba(234,234,238,.94); border-radius: 6px; padding: 3px 8px;
}
.stage-note b { font-weight: 560; color: var(--on-stage); }
.stage-hint {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 11px; color: var(--weak); pointer-events: none;
  transition: opacity var(--t);
  background: rgba(234,234,238,.94); border-radius: 6px; padding: 3px 8px;
}
/* 合図が出ている間は、下の説明と重ならないように引っ込める */
body.has-toast .stage-hint { opacity: 0; }
.stage-fail {
  max-width: 400px; background: var(--surface); border-radius: var(--r);
  padding: 20px 22px; box-shadow: var(--sh-3); line-height: 1.6;
}
.stage-fail h2 { margin: 0 0 8px; font-size: 14px; }
.stage-fail p { margin: 0; color: var(--weak); font-size: 12.5px; }

/* 進み具合 */
.busy {
  position: absolute; inset: 0; background: rgba(234,234,238,.82);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.busy.on { opacity: 1; pointer-events: auto; }
.busy-card {
  background: var(--surface); border-radius: var(--r); padding: 16px 18px;
  min-width: 220px; box-shadow: var(--sh-3);
  transform: translateY(6px); transition: transform var(--t);
}
.busy.on .busy-card { transform: none; }
.busy-card .t { font-size: 12.5px; font-weight: 560; margin-bottom: 9px; }
.meter { height: 5px; border-radius: 3px; background: #EDEDF1; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); width: 0%; transition: width 140ms linear; }

/* 色の点のつまみ。輪は SVG（線の上だけ掴める）、玉は DOM。 */
.pts { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pts > svg.rings {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  /* 白い絵の上でも輪が消えないように、線の外側へ濃い影を二重に落とす */
  filter: drop-shadow(0 0 1.6px rgba(0,0,0,.85)) drop-shadow(0 0 1px rgba(0,0,0,.7));
}
.pts > svg.hits  { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hits .hit { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; cursor: nwse-resize; }
.rings .ring {
  fill: none; stroke: rgba(255,255,255,.52); stroke-width: 1.5; stroke-dasharray: 5 5;
  pointer-events: none; transition: stroke var(--t), stroke-width var(--t);
}
.rings g.hov .ring { stroke: rgba(255,255,255,.85); }
.rings g.sel .ring { stroke: #fff; stroke-dasharray: none; stroke-width: 1.75; }
.rings g.lock .ring { stroke-dasharray: 2 4; }

.dot {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; border: 2.5px solid #fff; pointer-events: auto;
  box-shadow: 0 2px 9px rgba(0,0,0,.5); cursor: grab; touch-action: none;
  display: grid; place-items: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.dot:hover { transform: scale(1.12); }
.dot:active { cursor: grabbing; }
.dot.sel { transform: scale(1.24); box-shadow: 0 3px 14px rgba(0,0,0,.6); }
.dot.lock { border-style: double; border-width: 4px; }
.dot.out { opacity: .5; }
.dot.out:hover { opacity: .85; }
.dot > input[type=color] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.dot > .idx {
  font-size: 9.5px; font-weight: 700; color: #fff; pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.75); font-variant-numeric: tabular-nums;
}

.hnd {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.14); pointer-events: auto;
  cursor: grab; touch-action: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.42);
  transition: transform var(--t), background var(--t);
}
.hnd:hover { transform: scale(1.1); background: rgba(255,255,255,.26); }
.hnd:active { cursor: grabbing; }
.hnd::before, .hnd::after { content: ""; position: absolute; background: #fff; left: 50%; top: 50%; }
.hnd::before { width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; }
.hnd::after  { width: 1.5px; height: 10px; margin: -5px 0 0 -.75px; }
.hnd > .tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px);
  font-size: 10px; color: rgba(255,255,255,.85); white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* ---------- 右の列（ツマミ） ---------- */
.grp { border-bottom: 1px solid var(--line); }
.grp-head {
  width: 100%; appearance: none; border: 0; background: transparent;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 12px; text-align: left;
  font-size: 12px; font-weight: 620;
  transition: background var(--t-fast);
}
.grp-head:hover { background: #FAFAFC; }
.grp-head .tw {
  width: 12px; color: #A9A9B4; font-size: 9px; flex: none;
  transition: transform var(--t);
}
.grp[data-open="1"] .grp-head .tw { transform: rotate(90deg); }
.grp-head .tail { margin-left: auto; font-size: 10.5px; color: var(--weak); font-weight: 500; }
.grp-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.grp[data-open="1"] .grp-wrap { grid-template-rows: 1fr; }
.grp-clip { overflow: hidden; min-height: 0; }
.grp-body { padding: 2px 12px 13px; }

.sub {
  font-size: 10.5px; font-weight: 620; color: var(--weak);
  margin: 12px 0 5px; padding-top: 9px; border-top: 1px dashed var(--line);
}
.sub:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }

.ctl { margin: 0 0 9px; }
.ctl-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ctl-label { font-size: 11.5px; color: var(--ink); flex: 1 1 auto; min-width: 0; }
.ctl-num {
  width: 54px; height: 22px; text-align: right; flex: none;
  border: 1px solid transparent; border-radius: var(--r-xs); background: #F4F4F7;
  padding: 0 5px; font-size: 11px; font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), background var(--t-fast);
  -moz-appearance: textfield;
}
.ctl-num::-webkit-outer-spin-button, .ctl-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctl-num:hover { background: #EEEEF2; }
.ctl-num:focus { background: var(--surface); border-color: #C4C4CE; outline: none; }
.ctl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ctl-row .ctl-label { margin: 0; }
.ctl-ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--weak); margin-top: 2px; }

/* すべり */
input[type=range].rng {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px;
  background: transparent; margin: 0; cursor: pointer; display: block;
}
input[type=range].rng::-webkit-slider-runnable-track {
  height: 4px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--fill,0%), #E7E7ED var(--fill,0%));
}
input[type=range].rng::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 1px solid #C6C6D0; box-shadow: var(--sh-1);
  margin-top: -5px;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
input[type=range].rng:hover::-webkit-slider-thumb { border-color: #A8A8B4; }
input[type=range].rng:active::-webkit-slider-thumb { transform: scale(1.15); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
input[type=range].rng::-moz-range-track { height: 4px; border-radius: 3px; background: #E7E7ED; }
input[type=range].rng::-moz-range-progress { height: 4px; border-radius: 3px; background: var(--accent); }
input[type=range].rng::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1px solid #C6C6D0; }

/* 選択（segmented） */
.seg { display: inline-flex; background: #F1F1F5; border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg > button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11px; font-weight: 520;
  color: var(--weak); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.seg > button:hover { color: var(--ink); }
.seg > button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.seg-wide { display: flex; width: 100%; }
.seg-wide > button { flex: 1 1 0; }

/* 切替（toggle） */
.sw {
  appearance: none; border: 0; padding: 0; cursor: pointer; flex: none;
  width: 34px; height: 20px; border-radius: 10px; background: #DEDEE5;
  position: relative; transition: background var(--t);
}
.sw::after {
  content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: var(--sh-1);
  transition: transform var(--t);
}
.sw[aria-pressed="true"] { background: var(--accent); }
.sw[aria-pressed="true"]::after { transform: translateX(14px); }

/* 色 */
.sw-color {
  width: 26px; height: 22px; border-radius: var(--r-xs); flex: none;
  border: 1px solid rgba(0,0,0,.16); cursor: pointer; position: relative; overflow: hidden;
  transition: transform 90ms ease, box-shadow var(--t-fast);
  padding: 0; display: block;
}
.sw-color:hover { box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.sw-color:active { transform: translateY(1px); }
.sw-color > input[type=color] { position: absolute; inset: -4px; width: 200%; height: 200%; border: 0; padding: 0; opacity: 0; cursor: pointer; }
.hex {
  width: 78px; height: 22px; border-radius: var(--r-xs); background: #F4F4F7;
  border: 1px solid transparent; padding: 0 6px; font-size: 11px;
  font-variant-numeric: tabular-nums; text-transform: uppercase; flex: none;
}
.hex:focus { background: var(--surface); border-color: #C4C4CE; outline: none; }

/* まわし（dial） */
.dial { width: 54px; height: 54px; cursor: grab; touch-action: none; display: block; }
.dial:active { cursor: grabbing; }
.dial circle.bg { fill: #F4F4F7; stroke: var(--line); }
.dial line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.dial circle.pin { fill: var(--accent); }

.note {
  font-size: 11px; color: var(--weak); background: transparent;
  border-left: 2px solid var(--line); border-radius: 0;
  padding: 1px 0 1px 8px; margin: 2px 0 11px; line-height: 1.5;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }

/* ---------- 下の色の帯 ---------- */
.colorbar {
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px; overflow-x: auto; overflow-y: hidden;
}
.colorbar::-webkit-scrollbar { height: 6px; }
.colorbar::-webkit-scrollbar-thumb { background: #DDDDE4; border-radius: 4px; }
.cb-label { font-size: 11px; color: var(--weak); flex: none; padding-right: 2px; }
.colorbar > * { flex: none; }
.colorbar > .bar-group { flex: none; }
.chip {
  display: flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 6px 5px 5px; background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform 90ms ease;
}
.chip:hover { border-color: #C9C9D3; }
.chip:active { transform: translateY(1px); }
.chip.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.chip .dotc {
  width: 24px; height: 24px; border-radius: 50%; flex: none; position: relative;
  border: 1px solid rgba(0,0,0,.14); overflow: hidden;
}
.chip .dotc > input[type=color] { position: absolute; inset: -6px; width: 220%; height: 220%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.chip .hex { width: 74px; }
.chip .x { color: #B4B4BE; }
.cb-add { flex: none; }
.colorbar .btn { gap: 0; }
.cb-t { margin: 0 2px; }

/* ---------- 小窓（popover） ---------- */
.pop {
  position: fixed; z-index: 60; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 12px; min-width: 214px;
  opacity: 0; transform: translateY(-5px) scale(.985);
  transition: opacity var(--t), transform var(--t);
}
.pop.on { opacity: 1; transform: none; }
.pop h3 { margin: 0 0 9px; font-size: 11px; font-weight: 620; color: var(--weak); }
.pop .row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pop .row > .ctl-label { flex: 1 1 auto; }
.pop-foot { display: flex; gap: 6px; margin-top: 4px; }
.pop-foot .btn { flex: 1 1 auto; justify-content: center; }
.size-list {
  position: relative; max-height: 300px; overflow-y: auto; margin: -4px -4px 8px; padding: 4px;
  scrollbar-width: thin;
}
/* 下にまだ続きがある事を、いつも見える細い棒で伝える */
.size-list::-webkit-scrollbar { width: 8px; }
.size-list::-webkit-scrollbar-track { background: #F4F4F7; border-radius: 4px; }
.size-list::-webkit-scrollbar-thumb { background: #C9C9D3; border-radius: 4px; border: 2px solid #F4F4F7; }
.size-g { font-size: 10.5px; color: var(--weak); font-weight: 620; margin: 8px 4px 4px; }
.size-g:first-child { margin-top: 2px; }
.size-b {
  width: 100%; appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-xs);
  text-align: left; font-size: 12px; transition: background var(--t-fast);
}
.size-b:hover { background: #F4F4F7; }
.size-b[aria-pressed="true"] { background: var(--accent-bg); color: #B33F1C; font-weight: 560; }
.size-b .d { margin-left: auto; font-size: 10.5px; color: var(--weak); font-variant-numeric: tabular-nums; }
.size-b .r { width: 13px; flex: none; display: grid; place-items: center; }
.size-b .r i { display: block; background: #C2C2CC; border-radius: 1px; }

/* ---------- 合図（toast） ---------- */
.toasts {
  position: fixed; left: 50%; bottom: calc(var(--strip) + 16px); transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast {
  background: rgba(0,0,0,.92); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 500;
  box-shadow: var(--sh-2); white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.97);
  transition: opacity var(--t), transform var(--t);
}
.toast.on { opacity: 1; transform: none; }
.toast b { font-weight: 640; }

/* ---------- 狭い画面 ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.34); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity var(--t);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer-only, .drawer-left-only { display: none; }

.drawer-x {
  display: none; position: sticky; top: 0; z-index: 4;
  width: 100%; height: 38px; padding: 0 12px; margin: 0 0 2px;
  align-items: center; justify-content: flex-end; gap: 6px;
  background: var(--surface); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; font-size: 11.5px; font-weight: 540; color: var(--weak);
  cursor: pointer; transition: color var(--t-fast);
}
.drawer-x:hover { color: var(--ink); }
.drawer-x .k { font-size: 14px; line-height: 1; }

@media (max-width: 1180px) {
  .app { grid-template-columns: var(--left) minmax(0,1fr); grid-template-areas: "bar bar" "left stage" "strip strip"; }
  .col-right {
    position: fixed; top: 0; right: 0; bottom: 0; width: 300px; z-index: 50;
    box-shadow: var(--sh-3); transform: translateX(102%);
    transition: transform var(--t);
  }
  .col-right.open { transform: none; }
  .drawer-only { display: inline-flex; }
  .col-right > .drawer-x { display: flex; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0,1fr); grid-template-areas: "bar" "stage" "strip"; }

  /* 上のバーは必ず2段に固める。1段目=型・寸法・書き出す／2段目=戻す進める・ランダム・詳細。
     成り行きで折り返すと「書き出す」の居場所が幅によって動いてしまう */
  .bar-br { display: block; }
  .topbar > .bar-div { display: none; }
  .topbar > .brand { order: 1; padding-right: 0; }
  .topbar > .drawer-left-only { order: 2; }
  /* 寸法の名前は長い。基準の幅を0にして、余った分だけ広がる形にする
     （こうしないと寸法だけで1段を占め、書き出すが下へ落ちる） */
  .topbar > .bar-size { order: 3; flex: 1 1 0; min-width: 92px; max-width: 340px; }
  .topbar > .bar-size > .btn:first-child { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .topbar > .bar-size > .btn > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .topbar > .bar-sp { display: none; }
  .topbar > .bar-exp { order: 5; margin-left: auto; }
  .topbar > .bar-br { order: 6; }
  .topbar > .bar-hist { order: 7; }
  .topbar > .bar-rnd { order: 8; }
  .topbar > .drawer-only { order: 9; margin-left: auto; }

  .col-left {
    position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 50;
    box-shadow: var(--sh-3); transform: translateX(-102%);
    transition: transform var(--t); border-right: 1px solid var(--line);
  }
  .col-left.open { transform: none; }
  .col-left > .drawer-x { display: flex; }
  .stage { padding: 14px; }
  .toasts { bottom: calc(var(--strip) + 12px); }
  .drawer-left-only { display: inline-flex; }
}

@media (max-width: 640px) {
  :root { --strip: 60px; }
  .topbar { gap: 7px; padding: 7px 8px; }
  /* 狭い時の色の帯は「丸」だけにして、押す物が画面から出ないようにする */
  .chip .hex, .chip .lockb, .chip .x { display: none; }
  .chip { padding: 5px; }
  .cb-label { display: none; }
  .cb-t { display: none; }
  .topbar { gap: 7px; padding: 7px 9px; }
  .brand .tx { display: none; }
  .bar-sp { flex-basis: 4px; }
  .bar-hide-sm { display: none; }
  .frame { box-shadow: 0 8px 20px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.14); }
  .stage-hint { display: none; }
  .pop { left: 8px !important; right: 8px; width: auto; min-width: 0; max-width: none; }
}

/* ---------- 指で触る画面（押す所を44px以上に） ---------- */
@media (pointer: coarse) {
  .btn { height: 44px; padding: 0 14px; font-size: 13px; }
  .btn-sm { height: 44px; padding: 0 11px; font-size: 12.5px; }
  .btn-icon { width: 44px; }
  .btn-icon.btn-sm { width: 44px; }
  .rnd-part { height: 44px; font-size: 12.5px; padding: 0 12px; }
  .inp { height: 44px; }
  .drawer-x { height: 50px; }

  /* すべりは見た目の細さのままで、上下に余白を足して掴みやすくする */
  input[type=range].rng { height: 44px; padding: 13px 0; }
  input[type=range].rng::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
  input[type=range].rng::-moz-range-thumb { width: 19px; height: 19px; }

  .ctl { margin-bottom: 4px; }
  .ctl-num { height: 36px; width: 64px; font-size: 12.5px; }
  .hex { height: 36px; }
  .sw-color { width: 34px; height: 30px; }
  .seg > button { height: 34px; padding: 0 12px; font-size: 12.5px; }
  .sw { width: 50px; height: 32px; border-radius: 16px; }
  .sw::after { width: 28px; height: 28px; }
  .sw[aria-pressed="true"]::after { transform: translateX(18px); }
  .mini { width: 38px; height: 36px; font-size: 15px; }
  .mini.lockb { padding: 0 10px; font-size: 12px; }
  .grp-head { padding: 15px 12px; font-size: 13px; }
  .size-b { padding: 11px 6px; font-size: 13px; }
  .look .nm { padding: 9px 8px; font-size: 12.5px; }
  .look canvas { height: 62px; }
  .item { padding: 7px; }
  .item canvas { width: 40px; height: 54px; }
  .chip { min-height: 44px; padding: 6px; }
  .chip .dotc { width: 32px; height: 32px; }
  .cb-add, .colorbar .btn { min-height: 44px; }

  /* 絵の上の点・つまみも指で掴める大きさに */
  .dot { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .dot > .idx { font-size: 11px; }
  .hnd { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .hits .hit { stroke-width: 34; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
}