/* 不可視生物 レポートカードメーカー / すべて .ibcm 配下に限定し、テーマCSSと干渉しないようにしています */
.ibcm{
  --ibcm-bg:#0f0f16; --ibcm-surface:#1a1a24; --ibcm-fg:#ecebf3; --ibcm-muted:#9a98ab;
  --ibcm-line:#2e2c3b; --ibcm-stage:#07070b; --ibcm-focus:#8fb0ff;
  --ibcm-font:"Zen Antique","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  background:var(--ibcm-bg); color:var(--ibcm-fg); font-family:var(--ibcm-font);
  font-size:15px; line-height:1.7; font-weight:400;
  border:1px solid var(--ibcm-line); border-radius:6px;
  padding:20px 16px; margin:0 0 1.5em;
}
.ibcm,.ibcm *,.ibcm *::before,.ibcm *::after{box-sizing:border-box}
.ibcm *{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;float:none;max-width:none}
.ibcm *::before,.ibcm *::after{content:none}
.ibcm img,.ibcm canvas{display:block;max-width:100%;height:auto}
.ibcm button,.ibcm input,.ibcm textarea{font-family:inherit;font-size:inherit;line-height:inherit;-webkit-appearance:none;appearance:none;border-radius:0}
.ibcm a{text-decoration:none;box-shadow:none;border-bottom:0}
.ibcm :focus-visible{outline:2px solid var(--ibcm-focus);outline-offset:2px}

.ibcm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-bottom:16px}
.ibcm-title{font-size:20px;line-height:1.3}
.ibcm-sub{font-size:12px;letter-spacing:.1em;color:var(--ibcm-muted)}

.ibcm-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.ibcm-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.ibcm-stage,.ibcm-panel{min-width:0}

.ibcm-frame{background:var(--ibcm-stage);border:1px solid var(--ibcm-line);border-radius:4px;overflow:hidden;line-height:0}
.ibcm-frame img{width:100%}
.ibcm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ibcm-btn{display:inline-block;font-size:14px;line-height:1.3;padding:10px 15px;border:1px solid var(--ibcm-line);
  border-radius:4px;background:var(--ibcm-surface);color:var(--ibcm-fg);cursor:pointer;text-align:center}
.ibcm-btn:hover{border-color:var(--ibcm-muted)}
.ibcm-btn.ibcm-primary{background:var(--ibcm-fg);color:var(--ibcm-bg);border-color:var(--ibcm-fg)}
.ibcm-status{font-size:13px;color:var(--ibcm-muted);margin-top:10px;min-height:1.7em}
.ibcm-hint{font-size:13px;color:var(--ibcm-muted);margin-top:2px}

.ibcm-cap{font-size:12px;letter-spacing:.12em;color:var(--ibcm-muted);margin:20px 0 8px;display:block}
.ibcm-titleout{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ibcm-code{flex:1 1 220px;min-width:0;font-size:14px;background:var(--ibcm-surface);border:1px solid var(--ibcm-line);
  border-radius:4px;padding:8px 10px;overflow-wrap:anywhere}

.ibcm-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ibcm-cmp{padding:0;background:var(--ibcm-stage);border:2px solid var(--ibcm-line);border-radius:4px;
  overflow:hidden;line-height:0;cursor:pointer;display:block;width:100%}
.ibcm-cmp canvas{width:100%}
.ibcm-cmp span{display:block;line-height:1.4;font-size:12px;padding:6px 8px;background:var(--ibcm-surface);
  color:var(--ibcm-fg);border-top:1px solid var(--ibcm-line);text-align:left}
.ibcm-cmp[aria-pressed="true"]{border-color:var(--ibcm-fg)}

.ibcm-panel{display:flex;flex-direction:column;gap:16px}
.ibcm-panel fieldset{min-width:0;display:block}
.ibcm-lab,.ibcm-panel legend{display:block;font-size:12px;letter-spacing:.08em;color:var(--ibcm-muted);margin-bottom:6px}
.ibcm-row{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ibcm-opts{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ibcm-opts.ibcm-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ibcm-opt{position:relative;min-width:0}
.ibcm-opt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ibcm-opt label{display:flex;align-items:center;gap:9px;min-height:50px;padding:8px 10px 8px 13px;
  border:1px solid var(--ibcm-line);border-radius:4px;background:var(--ibcm-surface);cursor:pointer;
  font-size:14px;position:relative;overflow:hidden}
.ibcm-opt label i{width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:#07070b;border-radius:4px;border:1px solid var(--ibcm-line)}
.ibcm-opt label i img{width:22px;height:22px;object-fit:contain}
.ibcm-opt label b{display:block;width:4px;position:absolute;left:0;top:0;bottom:0;background:var(--ibcm-c,transparent)}
.ibcm-opt input:checked+label{border-color:var(--ibcm-fg);box-shadow:inset 0 0 0 1px var(--ibcm-fg)}
.ibcm-three label{justify-content:center;padding-left:10px;font-size:16px;letter-spacing:.06em}

.ibcm-panel input[type=text],.ibcm-panel input[type=number],.ibcm-panel textarea{
  display:block;width:100%;color:var(--ibcm-fg);background:var(--ibcm-surface);
  border:1px solid var(--ibcm-line);border-radius:4px;padding:9px 11px}
.ibcm-panel textarea{resize:vertical;min-height:4.2em}
.ibcm-panel input[type=file]{display:block;font-size:13px;color:var(--ibcm-muted);max-width:100%}
.ibcm-note{font-size:12px;color:var(--ibcm-muted);margin-top:6px}
.ibcm-sample{font-size:12px;color:var(--ibcm-muted);border-left:3px solid var(--ibcm-line);padding-left:10px}
.ibcm-imgrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (prefers-reduced-motion:no-preference){.ibcm-cmp,.ibcm-btn{transition:border-color .15s}}