/* ============================================================
   モザイクツール固有のスタイル
   共通部分は ../shared/base.css
   ============================================================ */

/* ---- 読み込んだ画像の一覧（縦） ---- */
.filmstrip{
  width:104px;flex:none;
  display:flex;flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--line);
}
.filmstrip-head{
  display:flex;align-items:center;gap:6px;
  padding:8px;border-bottom:1px solid var(--line);
  font-size:11px;color:var(--muted);
}
.filmstrip-head .btn{flex:0 0 26px;padding:2px 0;font-size:15px;line-height:1.2}
.filmstrip-list{
  flex:1;overflow-y:auto;
  padding:8px;display:flex;flex-direction:column;gap:8px;
}
.thumb{
  position:relative;
  border:2px solid transparent;border-radius:8px;
  background:#11141a;cursor:pointer;overflow:hidden;
  padding:0;
  transition:.12s;
}
.thumb:hover{border-color:#4a5566}
.thumb.on{border-color:var(--accent)}
.thumb img{display:block;width:100%;height:64px;object-fit:contain;background:#0d1015}
.thumb .cap{
  display:block;padding:3px 4px;
  font-size:9.5px;line-height:1.3;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.thumb.on .cap{color:var(--text)}
.thumb .badge{
  position:absolute;top:3px;right:3px;
  min-width:16px;height:16px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  font-size:9px;font-weight:700;border-radius:8px;
}
.filmstrip-empty{
  padding:14px 8px;color:var(--muted);
  font-size:10.5px;line-height:1.7;text-align:center;
}

/* ---- 効果・形の選択ボタン ---- */
.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pick{
  background:#2c3340;border:1px solid var(--line);border-radius:8px;
  padding:9px 4px;cursor:pointer;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font:inherit;font-size:10px;transition:.12s;
}
.pick:hover{background:#39424f;border-color:#4a5566}
.pick.on{
  background:rgba(79,156,249,.16);
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(79,156,249,.35);
}
.pick svg{width:26px;height:26px;fill:#e7eaf0;color:#e7eaf0}
.pick.on svg{fill:#cfe4ff;color:#cfe4ff}

/* ---- 色（塗りつぶし用） ---- */
.colorrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.colorrow > span{flex:1;font-size:11px;color:var(--muted)}
.swatchbtn{
  width:38px;height:26px;flex:none;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;
  background-color:#111;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
  transition:.12s;
}
.swatchbtn:hover{border-color:var(--accent);transform:scale(1.06)}
.hex{
  width:92px;flex:none;
  background:#161a22;color:var(--text);
  border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;
  font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  text-transform:lowercase;
}
.hex:focus{outline:none;border-color:var(--accent)}
.hex.bad{border-color:var(--danger);color:#ff9ba0}

/* ---- 注意書き ---- */
.warn{
  margin:10px 0 0;padding:8px 10px;
  background:rgba(229,72,77,.10);
  border:1px solid rgba(229,72,77,.35);border-radius:7px;
  font-size:10.5px;line-height:1.7;color:#f0c4c6;
}
.warn strong{color:#ffd9da}

#stage{cursor:crosshair}

@media (max-width:820px){
  .filmstrip{
    width:100%;flex-direction:row;
    border-right:none;border-bottom:1px solid var(--line);
  }
  .filmstrip-head{flex-direction:column;border-bottom:none;border-right:1px solid var(--line)}
  .filmstrip-list{flex-direction:row}
  .thumb{width:96px;flex:none}
}