/* クリエイティブ管理ページ専用スタイル */

.cr-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--bg2);
  border: 1px solid var(--bdr); border-radius: 8px; margin-bottom: 10px;
}
.cr-filters select, .cr-filters input[type="text"] {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx); padding: 5px 10px; font-size: 12px; font-family: inherit;
}
.cr-filters select:focus, .cr-filters input:focus { outline: none; border-color: var(--acc); }
.cr-filters input[type="text"] { min-width: 160px; }
.cr-reset-btn, .cr-new-btn {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx2); padding: 5px 12px; font-size: 11px;
  cursor: pointer; font-family: inherit;
}
.cr-reset-btn:hover { background: var(--bg2); }
.cr-new-btn { background: var(--acc); color: #fff; border-color: var(--acc); font-weight: 600; }
.cr-new-btn:hover { opacity: .9; }

.cr-paginator { display: flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: 11px; }
.cr-paginator button {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx2); padding: 4px 12px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.cr-paginator button:hover:not(:disabled) { background: var(--acc); color: #fff; border-color: var(--acc); }
.cr-paginator button:disabled { opacity: .4; cursor: not-allowed; }

.cr-table-wrap {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 8px;
  overflow: auto; max-height: calc(100vh - 220px);
  zoom: var(--tbl-zoom, 1);
}
.cr-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.cr-table th {
  background: var(--bg3); color: var(--tx3); padding: 9px 12px;
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; position: sticky; top: 0; z-index: 5; white-space: nowrap;
  border-bottom: 1px solid var(--bdr2);
}
.cr-table th.sortable { cursor: pointer; user-select: none; }
.cr-table th.sortable:hover { background: var(--bg); color: var(--tx); }
.cr-table td {
  padding: 7px 10px; border-top: 1px solid var(--bdr); color: var(--tx2);
  white-space: nowrap;
}
.cr-table tr:hover td { background: var(--bg3); }
.cr-table td.mono { font-family: "SF Mono", Monaco, monospace; color: var(--tx); font-weight: 500; }
.cr-table td.editable { cursor: pointer; }
.cr-table td.editable:hover { background: var(--bg); color: var(--acc); }
.cr-table td.cr-memo-cell { max-width: 220px; }
.cr-edit-btn {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: rgba(59,130,246,.15); color: #60a5fa;
  border: 1px solid rgba(59,130,246,.3); border-radius: 4px;
  font-size: 10px; font-family: inherit; text-decoration: none;
  white-space: nowrap; font-weight: 500;
}
.cr-edit-btn:hover { background: rgba(59,130,246,.25); }
.cr-table td.cr-memo-cell .cr-memo-text { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cr-table td.cr-fmt-cell { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-table.memo-collapsed th[data-memo],
.cr-table.memo-collapsed td[data-memo] { display: none; }

/* 一覧の列整理 (2026-09-09): 区分/本編No/カテゴリ別タグ/媒体別メモ5分類を追加 */
.cr-table th.stick1, .cr-table td.stick1,
.cr-table th.stick2, .cr-table td.stick2 {
  position: sticky; background: var(--bg2);
}
.cr-table th.stick1, .cr-table td.stick1 { left: 0; z-index: 3; }
.cr-table th.stick2, .cr-table td.stick2 { left: 46px; z-index: 3; box-shadow: 2px 0 4px rgba(0,0,0,.25); }
.cr-table th.stick1, .cr-table th.stick2 { z-index: 6; }
.cr-table tr:hover td.stick1, .cr-table tr:hover td.stick2 { background: var(--bg3); }

.cr-table .crcode { font-family: "SF Mono", Monaco, monospace; color: var(--tx); text-decoration: none; }
.cr-table .crcode:hover { color: var(--acc); }
.cr-table .pj, .cr-table .who { font-size: 11.5px; }
.cr-table .kbn {
  display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.cr-table .kbn.new { background: rgba(148,163,184,.14); color: var(--tx3); }
.cr-table .kbn.roll { background: rgba(59,130,246,.16); color: var(--acc,#60a5fa); }
.kbn-override { margin-left: 2px; color: var(--tx3); }
.cr-table .lot { margin-left: 4px; font-size: 10px; color: var(--tx3); white-space: nowrap; }
.cr-table .tags { display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; white-space: normal; }
.cr-table .tags.tags-collapsed { flex-wrap: nowrap; overflow: hidden; max-width: 140px; }
.cr-table .tag { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 10.5px; white-space: nowrap; }
.cr-table .tag.tag-more { background: var(--bg3); color: var(--tx3); border: 1px solid var(--bdr); flex: none; }
.tagcol-toggle {
  background: transparent; border: none; color: var(--tx3); cursor: pointer; font-size: 9px;
  padding: 0 0 0 4px; vertical-align: middle;
}
.tagcol-toggle:hover { color: var(--tx); }
.cr-table .memo { color: var(--tx2); }
.cr-table .memo.empty { color: var(--tx3); }
.cr-table td.memo-cell5 { max-width: 180px; }

/* ツールバートグルボタン */
.cr-mode-btn {
  padding: 6px 12px; background: var(--bg3); border: 1px solid var(--bdr2);
  color: var(--tx2); border-radius: 6px; font-size: 12px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.cr-mode-btn:hover { background: var(--bg); color: var(--tx); }
.cr-mode-btn.active {
  background: rgba(59,130,246,.15); color: #60a5fa; border-color: rgba(59,130,246,.4);
}
.cr-mode-btn.danger {
  background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.4);
}

/* 削除モード */
.cr-delete-bar {
  display: flex; align-items: center; gap: 12px;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3);
  border-radius: 6px; padding: 8px 14px; margin-bottom: 10px;
  font-size: 12px; color: var(--tx2);
}
.cr-delete-bar strong { font-weight: 700; }
.cr-del-btn {
  padding: 6px 14px; background: #ef4444; color: #fff; border: none;
  border-radius: 4px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.cr-del-btn:disabled { opacity: .4; cursor: not-allowed; }
.cr-del-btn:hover:not(:disabled) { background: #dc2626; }
.cr-del-btn.secondary { background: var(--bg3); color: var(--tx2); }
.cr-del-btn.secondary:hover { background: var(--bg); color: var(--tx); }
.cr-table td.cr-select-cell, .cr-table th.cr-select-cell {
  width: 1%; padding: 0 10px; text-align: center;
}
/* サムネ列 (ON/OFF 切替) */
.cr-table th.cr-thumb-head { width: 80px; text-align: center; }
.cr-table td.cr-thumb-cell { width: 80px; padding: 4px; text-align: center; }
.cr-table td.cr-thumb-cell .cr-thumb-box {
  width: 70px; max-height: 70px; margin: 0 auto;
  background: #000; border: 1px solid var(--bdr); border-radius: 4px;
  overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cr-table td.cr-thumb-cell .cr-thumb-box img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.cr-table td.cr-thumb-cell .cr-thumb-box.thumb-fail {
  background: var(--bg3); color: var(--tx3); font-size: 10px; cursor: default;
}
/* 2枚1組 (SmartNews i系): 長方形(-1) + 正方形(-2) を横並び。
   幅は JS 側のインライン指定 (62px / 34px)。margin:auto は flex では効かせない */
.cr-table td.cr-thumb-cell .cr-thumb-pair {
  display: flex; gap: 4px; align-items: center; justify-content: center;
}
.cr-table td.cr-thumb-cell .cr-thumb-pair .cr-thumb-box { margin: 0; flex: 0 0 auto; }
.cr-table tr.selected td { background: rgba(239,68,68,.06); }
.cr-table.delete-mode tr:hover td { background: rgba(239,68,68,.1); }
.cr-table.delete-mode tr.selected:hover td { background: rgba(239,68,68,.12); }
.cr-table td.cr-pm-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cr-table td.cr-ver-cell { max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.cr-table td.cr-cl-cell, .cr-table th:nth-child(6) { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.cr-table td.cr-status-cell, .cr-table th:nth-child(7) { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* サムネ列 ON 時は CL/Status が 1 列ずつ右にズレる */
.cr-table.with-thumb th:nth-child(6) { width: auto; padding-left: 6px; padding-right: 6px; }
.cr-table.with-thumb th:nth-child(7) { width: auto; padding-left: 6px; padding-right: 6px; }
.cr-table.with-thumb th:nth-child(8) { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.cr-table.with-thumb th:nth-child(9) { width: 1%; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.cr-table td.cr-yt-cell { width: 1%; white-space: nowrap; }
.cr-table td.cr-yt-cell .yt-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--tx2); }
.cr-table td.cr-yt-cell .yt-link:hover { color: var(--acc); }
.cr-table td.cr-yt-cell .yt-icon { flex-shrink: 0; }
.cr-table td.cr-yt-cell .yt-url { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-family: "SF Mono", Monaco, monospace; }
.cr-table td.locked { color: var(--tx2); position: relative; }
.cr-table td.locked:hover::after {
  content: '🔒 管理者のみ編集可';
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  background: var(--bg3); color: var(--tx2); padding: 3px 8px; border-radius: 4px;
  font-size: 10px; white-space: nowrap; pointer-events: none; z-index: 20;
  border: 1px solid var(--bdr2);
}
.cr-table td.editing { padding: 2px 4px; background: var(--bg); }
.cr-table td.editing select {
  width: 100%; background: var(--bg2); border: 1px solid var(--acc); border-radius: 4px;
  color: var(--tx); padding: 4px 6px; font-size: 12px; font-family: inherit;
}
.cr-table td.editing select:focus { outline: none; }

.cr-badge {
  display: inline-block; padding: 2px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
}
.badge-done { background: rgba(16,185,129,.2); color: #10b981; }
.badge-mid  { background: rgba(245,158,11,.2); color: #f59e0b; }
.badge-err  { background: rgba(239,68,68,.2);  color: #ef4444; }
.badge-none { background: var(--bg3); color: var(--tx3); }
/* CLバッジは common.css の .cl-* を共通利用（重複削除） */

.cr-tag-filters {
  margin-top: 6px;
  background: var(--bg3);
  border-style: dashed;
}
.cr-filter-label {
  font-size: 11px;
  color: var(--tx3);
  font-weight: 600;
  margin-right: 4px;
  align-self: center;
}

.cr-view-toggle { display: flex; gap: 0; border: 1px solid var(--bdr2); border-radius: 6px; overflow: hidden; margin: 0 4px; }
.cr-view-toggle button {
  background: var(--bg3); border: none; color: var(--tx2);
  padding: 5px 12px; font-size: 11px; cursor: pointer; font-family: inherit;
}
.cr-view-toggle button:hover { background: var(--bg2); }
.cr-view-toggle button.active { background: var(--acc); color: #fff; font-weight: 600; }

.yt-link { color: #ff0000; font-size: 11px; }
.yt-link:hover { text-decoration: underline; }

.cr-table td.editing input[type="text"] {
  width: 100%; background: var(--bg2); border: 1px solid var(--acc); border-radius: 4px;
  color: var(--tx); padding: 4px 6px; font-size: 12px; font-family: inherit;
}
.cr-table td.editing input[type="text"]:focus { outline: none; }

/* ==== ギャラリービュー ==== */
.gal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px; padding: 4px;
}
.gal-card {
  background: var(--bg2); border: 1px solid var(--bdr); border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.15), 0 6px 16px rgba(0,0,0,.10);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
:root[data-theme="dark"] .gal-card {
  box-shadow: 0 2px 6px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35);
}
.gal-card:hover {
  transform: translateY(-3px); border-color: var(--acc);
  box-shadow: 0 6px 20px rgba(59,130,246,.20), 0 4px 10px rgba(0,0,0,.15);
}
:root[data-theme="dark"] .gal-card:hover {
  box-shadow: 0 6px 22px rgba(59,130,246,.30), 0 4px 12px rgba(0,0,0,.5);
}
.gal-media {
  position: relative; background: var(--bg3);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  overflow: hidden;
  aspect-ratio: 9/16; /* 全カード統一（縦長動画ベース、バナーはcontain+blur背景） */
}
/* ぼかし背景: サムネ画像を拡大・ぼかして余白を埋める（<img>ベース） */
.gal-bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(26px) brightness(0.5) saturate(1.4);
  transform: scale(1.25);
  z-index: 0;
  pointer-events: none;
}
.gal-fg-img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
/* 2枚1組 (SmartNews i系): 長方形(-1) を上、正方形(-2) を下に縦並び。
   9:16 のカード内で上下半分ずつを contain で埋める */
.gal-pair {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px; box-sizing: border-box;
}
.gal-pair img {
  flex: 1 1 0; min-height: 0; width: 100%;
  object-fit: contain; display: block; border-radius: 3px;
}
.gal-nothumb { color: var(--tx3); text-align: center; font-size: 32px; line-height: 1.3; }
.gal-nothumb span { font-size: 10px; font-family: monospace; color: var(--tx2); }
.gal-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.6); color: #fff; width: 40px; height: 40px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; pointer-events: none;
  transition: opacity .2s;
}
.gal-media:hover .gal-play { opacity: .4; }
.gal-hover-media {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0; z-index: 4; background: transparent;
  object-fit: contain;
}
.gal-media.thumb-fail {
  background: linear-gradient(135deg, var(--bg3), var(--bg2));
}
.gal-media.thumb-fail::after {
  content: '🎬'; color: var(--tx3); font-size: 32px;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.gal-cl { position: absolute; top: 6px; right: 6px; }
.gal-info { padding: 10px 12px; }
.gal-code { font-family: monospace; font-size: 12px; color: var(--tx); font-weight: 600; margin-bottom: 6px; }
/* Symphony CR ラベル (一覧/ギャラリー共用)。詳細モーダルのバッジと同じ紫系 */
.cr-sym-label { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: rgba(168,85,247,.18); color: #c084fc; vertical-align: middle; }
.gal-meta { display: flex; gap: 6px; margin-bottom: 6px; font-size: 10px; color: var(--tx3); flex-wrap: wrap; }
.gal-people {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 10px; color: var(--tx2);
  padding: 4px 6px; background: var(--bg3); border-radius: 4px;
}
.gal-people span { white-space: nowrap; }
.gal-memo {
  background: var(--bg3); color: var(--tx2); padding: 5px 8px; border-radius: 4px;
  font-size: 11px; cursor: pointer; text-align: center;
}
.gal-memo:hover { background: var(--acc); color: #fff; }
.gal-yt {
  display: block; margin-top: 6px; text-align: center; font-size: 10px;
  color: #ff0000; padding: 4px 8px; background: rgba(255,0,0,.1); border-radius: 4px;
}
.gal-yt:hover { background: rgba(255,0,0,.2); text-decoration: none; }

.gal-perf {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  padding: 6px 8px; background: var(--bg3); border-radius: 5px;
  margin-bottom: 6px; font-size: 10px;
}
.gal-perf > div { display: flex; justify-content: space-between; align-items: center; }
.gal-perf .l { color: var(--tx3); font-size: 9px; }
.gal-perf .v { color: var(--tx); font-weight: 600; font-variant-numeric: tabular-nums; }

.cr-perf-panel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px; background: var(--bg2);
  border: 1px solid var(--bdr); border-radius: 8px; margin-bottom: 10px;
  font-size: 11px;
}
.cr-perf-panel .cr-perf-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.cr-perf-panel strong { color: var(--tx); font-size: 12px; }
.cr-perf-panel label { display: inline-flex; align-items: center; gap: 5px; color: var(--tx2); }
.cr-perf-panel input[type="number"], .cr-perf-panel select {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx); padding: 4px 8px; font-size: 11px; font-family: inherit;
}
.cr-perf-panel input:focus, .cr-perf-panel select:focus { outline: none; border-color: var(--acc); }

.period-btns { display: inline-flex; gap: 0; border: 1px solid var(--bdr2); border-radius: 6px; overflow: hidden; }
.period-btn {
  background: var(--bg3); border: none; border-left: 1px solid var(--bdr);
  color: var(--tx2); padding: 4px 10px; font-size: 11px; font-family: inherit; cursor: pointer;
}
.period-btn:first-child { border-left: none; }
.period-btn:hover { background: var(--bg2); }
.period-btn.active { background: var(--acc); color: #fff; font-weight: 600; }

.cr-perf-panel input[type="date"] {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx); padding: 4px 8px; font-size: 11px; font-family: inherit;
}
.cr-perf-panel input[type="date"]:focus { outline: none; border-color: var(--acc); }

.perf-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--tx2); cursor: pointer;
  padding: 4px 10px; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
}
.perf-toggle input[type="checkbox"] { accent-color: var(--acc); cursor: pointer; }
.perf-toggle:has(input:checked) { background: var(--acc); color: #fff; border-color: var(--acc); }

.cr-chip { background: var(--bg2); border: 1px solid var(--bdr); padding: 8px 10px; border-radius: 6px; }
.cr-chip-l { font-size: 10px; color: var(--tx3); margin-bottom: 3px; }
.cr-chip-v { font-size: 12px; color: var(--tx); font-weight: 500; }

/* ==== CR詳細ポップアップ（ダッシュボード互換） ==== */
.crmodal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); z-index: 9000; align-items: center; justify-content: center; }
.crmodal.show { display: flex; }
.crmodal-inner {
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 12px;
  padding: 20px; max-width: 1400px; width: 95%; height: 92vh;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.crmodal-close { position: absolute; top: 10px; right: 14px; font-size: 22px; color: var(--tx3); cursor: pointer; border: none; background: none; z-index: 5; }
.crmodal-close:hover { color: var(--tx); }
.crmodal-title {
  font-size: 16px; margin-bottom: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0;
}
.crmodal-title .badge {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: var(--bg3); color: var(--tx2); font-weight: 500;
}
.crmodal-grid {
  display: grid; grid-template-columns: 460px 1fr; gap: 16px;
  flex: 1; min-height: 0; overflow: hidden;
}
.crmodal-left, .crmodal-right {
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; padding-right: 8px;
}
.crmodal-video iframe, .crmodal-iframe {
  width: 100%; height: 560px; border: 0; border-radius: 8px; background: #000;
}
/* 2026-09-16: CR 詳細の動画枠は CR 種別の縦横比 (inline の aspect-ratio) に合わせる (.crmodal-fit)。
   Drive の埋め込みプレーヤーはサムネを枠いっぱいに cover で描く (再生中は contain) ので、
   枠が動画と同じ比率でないとサムネの FV が上下に切れる。 縦長 (9:16) は高さを画面の 68% に収めて中央寄せ。
   material.js / competitor-modal.js の枠 (比率不明) は従来どおり 560px のまま */
.crmodal-video iframe.crmodal-fit, .crmodal-iframe.crmodal-fit {
  display: block; margin: 0 auto; height: auto; min-height: 0; max-height: none;
}
.crmodal-video iframe.crmodal-fit.ar-tall, .crmodal-iframe.crmodal-fit.ar-tall {
  width: min(100%, calc(68vh * 9 / 16));
}
/* 静止画 (バナー) の枠 (2026-09-16): Drive の画像ビューアは画像を contain で中央に置き、 右上にポップアウト (上端から 52px)・
   下中央にズーム (下端から 60px) を重ねる。 枠 (iframe) を画像より上下 72px ずつ大きくし、 外側で画像の部分だけ見せる
   (操作ボタンは見えない範囲に落ちる)。 外側の縦横比は inline の aspect-ratio (CR 種別)、 幅は列いっぱい (縦長は動画と同じ 68vh) */
.crmodal-still {
  position: relative; overflow: hidden; width: 100%; border-radius: 8px; background: #000;
}
.crmodal-still.ar-tall { width: min(100%, calc(68vh * 9 / 16)); margin: 0 auto; }
.crmodal-still .crmodal-still-frame {
  position: absolute; left: 0; top: -72px; width: 100%; height: calc(100% + 144px);
  border: 0; border-radius: 0; background: #000; min-height: 0; max-height: none;
}
.crmodal-nomedia {
  background: var(--bg3); padding: 60px; text-align: center;
  color: var(--tx3); border-radius: 8px;
}
.crmodal-left::-webkit-scrollbar, .crmodal-right::-webkit-scrollbar { width: 6px; }
.crmodal-left::-webkit-scrollbar-thumb, .crmodal-right::-webkit-scrollbar-thumb { background: var(--bdr2); border-radius: 3px; }
.crmodal-hook {
  background: var(--bg3); border-left: 3px solid var(--acc);
  padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.5;
}
.crmodal-hook-lbl { font-size: 10px; color: var(--tx3); margin-bottom: 4px; font-weight: 600; }
.crmodal-section-lbl {
  font-size: 11px; font-weight: 700; color: var(--tx3);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.crmodal-grid-analysis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.crmodal-chip { background: var(--bg3); padding: 8px 10px; border-radius: 6px; }
.crmodal-chip .l { font-size: 10px; color: var(--tx3); margin-bottom: 2px; }
.crmodal-chip .v { font-size: 12px; color: var(--tx); font-weight: 600; }
.crmodal-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.crmodal-tag {
  background: var(--bg3); padding: 3px 9px; border-radius: 12px;
  font-size: 11px; color: var(--tx2); border: 1px solid var(--bdr);
}
.crmodal-tag.strong { background: var(--acc); color: #fff; border-color: var(--acc); }
.crmodal-emotion {
  background: var(--bg3); padding: 10px; border-radius: 6px;
  display: flex; align-items: center; gap: 10px;
}
.crmodal-emotion-pattern { font-size: 18px; font-weight: 700; color: var(--acc2); }
.crmodal-emotion-img { max-width: 100%; max-height: 280px; border-radius: 6px; margin-top: 6px; display: block; }
.crmodal-script {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 6px;
  padding: 10px 12px; font-size: 11px; line-height: 1.6;
  max-height: 220px; overflow-y: auto; white-space: pre-wrap; color: var(--tx2);
}
.crmodal-analysis-md {
  background: var(--bg); border: 1px solid var(--bdr); border-radius: 6px;
  padding: 12px 14px; font-size: 12px; line-height: 1.7;
  max-height: 400px; overflow-y: auto; color: var(--tx2);
}
.crmodal-copy-btn {
  background: var(--bg3); border: 1px solid var(--bdr2); color: var(--tx2);
  padding: 3px 10px; font-size: 10px; border-radius: 4px;
  cursor: pointer; font-family: inherit; letter-spacing: .2px;
}
.crmodal-copy-btn:hover { background: var(--acc); color: #fff; border-color: var(--acc); }
.crmodal-copy-btn.copied { background: #10b981; color: #fff; border-color: #10b981; }
.crmodal-perf {
  background: var(--bg3); padding: 10px; border-radius: 6px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center;
}
.crmodal-perf-item { font-size: 11px; }
.crmodal-perf-item .l { color: var(--tx3); font-size: 10px; margin-bottom: 2px; }
.crmodal-perf-item .v { font-weight: 700; color: var(--tx); font-size: 13px; }
/* 全媒体合計タイトル + 媒体別実績テーブル */
.crmodal-perf-title { font-size: 11px; color: var(--tx2); font-weight: 600; margin: 0 0 6px; }
.crmodal-perf-by-media { width: 100%; border-collapse: collapse; font-size: 11px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.crmodal-perf-by-media th { background: var(--bg2); color: var(--tx3); font-weight: 500; font-size: 10px; padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--bdr2); }
.crmodal-perf-by-media th.r { text-align: right; }
.crmodal-perf-by-media td { padding: 5px 6px; border-bottom: 1px solid var(--bdr); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; vertical-align: middle; }
.crmodal-perf-by-media td.r { text-align: right; }
.crmodal-perf-by-media tr:last-child td { border-bottom: none; }
.crmodal-perf-by-media tr:hover td { background: var(--bg2); }
.crmodal-media-badge { display: inline-block; padding: 1px 7px; border-radius: 10px; background: rgba(100,116,139,.18); color: var(--tx2); font-size: 10px; font-weight: 600; }

/* Copy button */
.cr-copy-btn{padding:3px 8px;border:1px solid var(--bdr2);background:var(--bg3);color:var(--tx2);border-radius:4px;cursor:pointer;font-size:11px}
.cr-copy-btn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}

/* フィルタ欄 sticky は撤去（見え方の都合で自然スクロールに戻す） */

/* ==== PM 列 (Premiere Pro フォルダリンク) ==== */
.cr-pm-cell { padding: 4px 8px !important; }
.cr-pm-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  font-size: 11px; font-family: inherit;
  border: 1px solid var(--bdr2); background: var(--bg3); color: var(--tx);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-pm-btn:hover { border-color: var(--acc); background: var(--bg); }
.cr-pm-resolved { color: #60a5fa; background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.3); }
.cr-pm-resolved:hover { color: #93c5fd; background: rgba(96,165,250,.18); border-color: var(--acc); }
.cr-pm-unresolved { color: #fbbf24; background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); }
.cr-pm-unresolved:hover { color: #fde68a; background: rgba(251,191,36,.18); border-color: #fbbf24; }

/* PM 空セル: クリック領域確保 ("-" だけだとクリックできない問題対策) */
.cr-pm-empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px dashed var(--bd, rgba(255,255,255,.12));
  border-radius: 4px;
  color: var(--tx3, #94a3b8);
  cursor: pointer;
  font-size: 12px;
  opacity: 0.65;
  transition: opacity .15s, background .15s, border-color .15s;
}
.cr-pm-empty:hover { opacity: 1; background: var(--bg, rgba(255,255,255,.06)); border-color: var(--acc, #60a5fa); border-style: solid; }

/* PM 値編集ミニボタン (📁/❓ ボタンの横に表示) */
.cr-pm-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--bd, rgba(255,255,255,.12));
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  opacity: 0.55;
  transition: opacity .15s, background .15s, border-color .15s;
}
.cr-pm-edit:hover { opacity: 1; background: var(--bg, rgba(255,255,255,.06)); border-color: var(--acc, #60a5fa); }

/* PM 再試行モーダル */
.pm-retry-modal { position: fixed; inset: 0; z-index: 10000; }
.pm-retry-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.pm-retry-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg2); border: 1px solid var(--bdr2); border-radius: 10px;
  width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto;
  padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.pm-retry-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--bdr);
}
.pm-retry-head h3 { margin: 0; font-size: 15px; color: var(--tx); }
.pm-retry-close {
  background: transparent; border: none; color: var(--tx2);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.pm-retry-close:hover { background: var(--bg3); color: var(--tx); }
.pm-retry-body { padding: 16px 18px; }
.pm-retry-info { width: 100%; font-size: 12px; color: var(--tx2); margin-bottom: 12px; }
.pm-retry-info th { width: 80px; text-align: left; padding: 4px 8px; color: var(--tx3); font-weight: normal; }
.pm-retry-info td { padding: 4px 8px; }
.pm-retry-info code { background: var(--bg3); padding: 2px 6px; border-radius: 3px; font-family: 'SF Mono', monospace; color: var(--tx); }
.pm-retry-reason-lbl { font-size: 12px; color: var(--warn); margin-bottom: 4px; font-weight: 600; }
.pm-retry-reason-text {
  background: var(--bg3); border: 1px solid var(--bdr); border-radius: 5px;
  padding: 8px 10px; margin: 0; font-size: 11px; color: var(--tx2);
  white-space: pre-wrap; word-break: break-all; max-height: 120px; overflow-y: auto;
  font-family: 'SF Mono', monospace;
}
.pm-retry-section { margin: 12px 0; }
.pm-retry-section-lbl { font-size: 12px; color: var(--tx); margin-bottom: 6px; font-weight: 600; }
.pm-retry-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 5px;
  color: var(--tx); padding: 6px 10px; font-size: 12px; font-family: inherit;
  margin-bottom: 8px;
}
.pm-retry-input:focus { outline: none; border-color: var(--acc); }
.pm-retry-save {
  background: var(--acc); border: none; color: #fff; padding: 6px 14px;
  border-radius: 5px; cursor: pointer; font-size: 12px; font-family: inherit;
}
.pm-retry-save:hover { background: #2563eb; }
.pm-retry-help { font-size: 11px; color: var(--tx3); }
.pm-retry-help code { background: var(--bg3); padding: 1px 6px; border-radius: 3px; }

/* ==== スマホ (2026-08-21) ====
   🛑 このファイルにはメディアクエリが 1 つも無く、 .crmodal-grid が
      `460px 1fr` 固定だった。 375px の画面では **左カラムだけで画面幅を超える**ため
      右カラム (メタデータ = 作成者 / ディレクション、 実績テーブル) が画面外に出て
      「スマホでは作成者とディレクションが見られない」状態だった (ユーザー指摘)。
      → 縦積みにして全部読めるようにする。 PC (769px 以上) の見た目は一切変えない。 */
@media (max-width: 768px) {
  /* 中央寄せのままだと inner(100vh) がモバイルの URL バー分だけ実視界より大きく、
     上端 (✕ボタン) が画面外にクリップされ閉じられなくなる → 上端基準 + 実視界高 (dvh) */
  .crmodal { align-items: flex-start; }
  .crmodal-inner { width: 100%; height: 100vh; height: 100dvh; max-width: none; border-radius: 0; padding: 14px 12px; }
  .crmodal-title { font-size: 14px; gap: 7px; margin-bottom: 10px; padding-right: 30px; }
  /* 左右 2 カラム → 1 カラム。 スクロールは外側 (.crmodal-grid) に一本化する
     (内側 2 つが別々にスクロールすると、 スマホでは下半分に触れなくなる) */
  .crmodal-grid { grid-template-columns: 1fr; gap: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .crmodal-left, .crmodal-right { overflow: visible; padding-right: 0; }
  .crmodal-video iframe, .crmodal-iframe { height: 58vw; min-height: 200px; max-height: 340px; }
  /* 縦長動画の枠は比率を保ったまま高さ 60vh に収める (上の min/max-height は .crmodal-fit で無効化済み) */
  .crmodal-video iframe.crmodal-fit.ar-tall, .crmodal-iframe.crmodal-fit.ar-tall { width: min(100%, calc(60vh * 9 / 16)); }
  .crmodal-still.ar-tall { width: min(100%, calc(60vh * 9 / 16)); }
  .crmodal-nomedia { padding: 30px 16px; }
  /* 3 列だと「ディレクション」の値が切れる → 2 列 */
  .crmodal-grid-analysis { grid-template-columns: repeat(2, 1fr); }
  .crmodal-perf { grid-template-columns: repeat(3, 1fr); }
  /* 幅の広い表は単体で横スクロールさせる (ページ全体を横に流さない) */
  .crmodal-perf-by-media { display: block; overflow-x: auto; white-space: nowrap; }
  .crmodal-script { max-height: 240px; }
}

/* ============================================================
   🏷️ CRタグ / 媒体別メモ5分類 (2026-09-09)
   ============================================================ */
.cr-tag-section { margin-top: 12px; }
.cr-tag-cat-row { margin-bottom: 10px; }
.cr-tag-cat-lbl { font-size: 10.5px; color: var(--tx3); font-weight: 600; margin-bottom: 4px; }
.cr-tag-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-tag-pill {
  display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11.5px; cursor: pointer;
  background: var(--bg3); color: var(--tx2); border: 1px solid var(--bdr);
  transition: background .12s, color .12s, border-color .12s;
}
.cr-tag-pill.on { background: var(--pill-color, #3b82f6); color: var(--pill-text, #fff); border-color: var(--pill-color, #3b82f6); }   /* --pill-text: 明るい色の上は黒 (2026-09-16) */
.cr-tag-add {
  display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11.5px; cursor: pointer;
  color: var(--tx3); border: 1px dashed var(--bdr2, #475569);
}
.cr-tag-add:hover { color: var(--acc); border-color: var(--acc); }
/* 一覧/ギャラリーのタグチップ (色ドット付き、コンパクト) */
.cr-tag-chip-mini {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 9px;
  font-size: 10px; background: var(--bg3); color: var(--tx2); white-space: nowrap;
}
.cr-tag-chip-mini .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-color, #6b7280); flex: none; }
/* 自動解除済み (当時) のタグ表示と、 タグ履歴 (2026-09-16) */
.cr-tag-pill.was { opacity: .6; border-style: dashed; }
.cr-tag-chip-mini.was { opacity: .6; }
.cr-tag-pill .was-mark, .cr-table .tag .was-mark, .cr-tag-chip-mini .was-mark { font-size: 9px; margin-left: 3px; opacity: .9; }
.cr-tag-hist-link { font-size: 11px; font-weight: 400; color: var(--tx3); cursor: pointer; margin-left: 8px; }
.cr-tag-hist-link:hover { color: var(--acc); }
.cr-hist-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.cr-hist-tbl th, .cr-hist-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--bdr); text-align: left; white-space: nowrap; }
.cr-hist-tbl th { color: var(--tx3); font-weight: 600; font-size: 11px; }

.cr-memo5-section { margin-top: 12px; }
.cr-memo5-row { margin-bottom: 8px; }
.cr-memo5-lbl { font-size: 10px; color: var(--tx3); font-weight: 600; margin-bottom: 3px; }
.cr-memo5-ta {
  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 12px;
  background: var(--bg3); color: var(--tx); border: 1px solid var(--bdr); border-radius: 6px; padding: 6px 8px;
}

/* タグ設定モーダル */
.mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mhead h3 { margin: 0; font-size: 15px; }
.mhead .x {
  background: transparent; border: none; color: var(--tx3); font-size: 15px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
}
.mhead .x:hover { background: var(--bg3); color: var(--tx); }

/* 2026-09-16: モーダル (.crmodal-inner) は 92vh 固定・overflow hidden なので、 タグが増えると下が切れて
   スクロールできなかった。 tagcfg を残り高さいっぱいに広げ、 タグ一覧 (.tagrows) とカテゴリ列だけを縦スクロールさせる
   (見出し・追加フォーム・注意書きは固定)。 タグ分析モーダルの .catpane も同じ扱い */
.tagcfg { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.catlist { flex: 0 0 170px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
/* カテゴリのピル型ボタン (色 = --cat-color、そのカテゴリのタグ色と同じ、2026-09-09) */
.cat {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  cursor: pointer; font-size: 13px; font-weight: 600; background: transparent;
  border: 1.5px solid var(--cat-color, var(--bdr2, #475569));
  /* 文字はテーマの文字色と混ぜて、 黄や白のカテゴリ色でもライトで読めるように (2026-09-16) */
  color: color-mix(in srgb, var(--cat-color, var(--tx2)) 55%, var(--tx));
}
.cat:hover { background: color-mix(in srgb, var(--cat-color, var(--bdr2)) 14%, transparent); }
.cat.on { background: var(--cat-color, var(--bdr2)); color: var(--cat-text, #0b1220); }
.cat .n {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: inherit; opacity: .75;
}

/* 名称は 1 行で省略。 これが無いと長いカテゴリ名でピルが縦に折り返して崩れる */
.cat .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat .arch, .cat .n { flex: none; }
/* アーカイブ済みカテゴリ (2026-09-14): 設定画面にだけ出す。 薄く + 破線で「使っていない」と分かるように */
.cat.archived { opacity: .5; border-style: dashed; }
.cat .arch, .catpane-head .arch {
  font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px;
  background: var(--bg3); color: var(--tx3); white-space: nowrap;
}
.cat.on .arch { background: rgba(11,18,32,.18); color: inherit; }

.catpane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.tagrows { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.catpane .usecnt { font-size: 11px; color: var(--tx3); }
/* 右ペーンの見出し: カテゴリ名 + 件数 + カテゴリ操作 (名称/色/削除) */
.catpane-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.catpane-head .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.catpane-head .rowbtns { margin-left: auto; }

.tagrow {
  display: flex; align-items: center; gap: 9px; padding: 9px 6px; border-bottom: 1px solid var(--bdr);
  font-size: 12.5px;
}
.tagrow .grip { color: var(--tx3); cursor: grab; font-size: 13px; }
.tagrow .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.tagrow .tagname { color: var(--tx); }
.tagrow .scope {
  padding: 1px 8px; border-radius: 8px; font-size: 10px; background: var(--bg3); color: var(--tx3);
  white-space: nowrap;
}
.tagrow .scope.pj { background: rgba(59,130,246,.16); color: var(--acc,#60a5fa); }
.tagrow .usecnt { margin-left: auto; color: var(--tx3); font-size: 11px; white-space: nowrap; }
.tagrow.archived { opacity: .45; }
.tagrow.dragging { opacity: .35; background: var(--bg3); }
.tagrow.dragging .grip { cursor: grabbing; }
.tagrow.drag-over-top { box-shadow: inset 0 2px 0 0 var(--acc,#60a5fa); }
.tagrow.drag-over-bottom { box-shadow: inset 0 -2px 0 0 var(--acc,#60a5fa); }
.rowbtns { display: flex; gap: 4px; }
.mini {
  font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  background: var(--bg3); color: var(--tx2); border: 1px solid var(--bdr);
}
.mini:hover { background: var(--bg2); color: var(--tx); }
.mini.danger { color: #f87171; border-color: rgba(239,68,68,.35); }
.mini.danger:hover { background: rgba(239,68,68,.12); }

.addform { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.addform input, .addform select {
  background: var(--bg3); color: var(--tx); border: 1px solid var(--bdr); border-radius: 6px;
  padding: 6px 10px; font-size: 12.5px;
}
.addform .btn.primary {
  background: var(--acc, #3b82f6); color: #fff; border: none; border-radius: 6px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-weight: 600;
}
.addform .btn.primary:hover { opacity: .9; }
.note { font-size: 10.5px; color: var(--tx3); margin-top: 8px; }

/* 色ピッカー (12色パレットのポップオーバー、「色」ボタンから) */
.color-picker-pop {
  position: fixed; z-index: 10000; background: var(--bg2); border: 1px solid var(--bdr2, #475569);
  border-radius: 8px; padding: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.4);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 148px;
}
.cp-swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); box-sizing: border-box;
}
.cp-swatch:hover { border-color: var(--tx); border-width: 2px; }

/* 一覧行の「編集ドロワー」を開くボタン */
.cr-row-edit-btn {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: rgba(59,130,246,.12); color: #60a5fa; border: 1px solid rgba(59,130,246,.3);
  font-size: 10.5px; cursor: pointer;
}
.cr-row-edit-btn:hover { background: rgba(59,130,246,.22); }

/* ============================================================
   CR編集ドロワー (2026-09-09) — 右からスライドインするオーバーレイパネル
   ============================================================ */
.ov {
  position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0);
  pointer-events: none; transition: background .18s;
}
.ov.show { background: rgba(0,0,0,.55); pointer-events: auto; }
.ov .drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw);
  background: var(--bg2); border-left: 1px solid var(--bdr2, #475569);
  box-shadow: -8px 0 30px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .2s ease;
}
.ov.show .drawer { transform: translateX(0); }
.ov .mhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--bdr); flex: none;
}
.ov .mhead h3 { margin: 0; font-size: 14px; font-weight: 600; }
.ov .mhead .x {
  background: transparent; border: none; color: var(--tx3); font-size: 15px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px;
}
.ov .mhead .x:hover { background: var(--bg3); color: var(--tx); }
.ov .mbody { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ov .field label { display: block; font-size: 10.5px; color: var(--tx3); font-weight: 600; margin-bottom: 5px; }
.ov .kbnauto { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.ov .field input[type="text"], .ov .field textarea {
  width: 100%; box-sizing: border-box; background: var(--bg3); color: var(--tx);
  border: 1px solid var(--bdr); border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 12.5px;
}
.ov .field textarea { min-height: 56px; resize: vertical; }
.pickbox { display: flex; flex-wrap: wrap; gap: 6px; }
.pick {
  padding: 4px 11px; border-radius: 12px; font-size: 11.5px; cursor: pointer;
  background: var(--bg3); color: var(--tx2); border: 1px solid var(--bdr); font: inherit;
}
.pick.on { background: var(--pill-color, #3b82f6); color: var(--pill-text, #fff); border-color: var(--pill-color, #3b82f6); }
.pick:hover:not(.on) { border-color: var(--tx3); }
.ov .btn {
  padding: 7px 16px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
  background: var(--bg3); color: var(--tx2); border: 1px solid var(--bdr);
}
.ov .btn.primary { background: var(--acc, #3b82f6); color: #fff; border: none; font-weight: 600; }
.ov .btn.primary:hover { opacity: .9; }

/* 区分フィルタ / 列表示ポップオーバー用の共通ボタン (cr-filters内) */
.cr-filters .btn {
  background: var(--bg3); border: 1px solid var(--bdr2); border-radius: 6px;
  color: var(--tx2); padding: 5px 12px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.cr-filters .btn:hover { background: var(--bg); color: var(--tx); }
.cr-filters .btn.on { background: var(--acc, #3b82f6); color: #fff; border-color: var(--acc, #3b82f6); font-weight: 600; }
.cr-filter-label { font-size: 11px; color: var(--tx3); font-weight: 600; white-space: nowrap; }

.colvis-pop {
  position: fixed; z-index: 10000; background: var(--bg2); border: 1px solid var(--bdr2, #475569);
  border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.4); min-width: 160px;
}

/* 一覧のタグセル「スポット編集」ポップオーバー */
.tagcell-pop {
  position: fixed; z-index: 10000; background: var(--bg2); border: 1px solid var(--bdr2, #475569);
  border-radius: 8px; padding: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.4);
  display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px;
}

/* 「タグ未設定」バッジ (分析完了なのにタグ0件、一覧・ギャラリー共通) */
.cr-untagged-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: rgba(245,158,11,.16); color: #f59e0b; font-size: 10.5px; cursor: default;
}

/* 📊 タグ分析パネル */
.tagan-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--bdr); }
.tagan-lbl { flex: 0 0 130px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx); }
.tagan-lbl .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* 白いタグ色の丸がライトで消えないように、 テーマ文字色の薄いリングを付ける (2026-09-16 ユーザー指摘)。 ダークでも黒い色の丸が見える */
.cr-tag-chip-mini .dot, .tagan-lbl .dot, .tagrow .swatch, .catpane-head .swatch { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tx) 45%, transparent); }
.tagan-bar-wrap { flex: 1; background: var(--bg3); border-radius: 4px; overflow: hidden; height: 10px; }
.tagan-bar { height: 100%; border-radius: 4px; min-width: 2px; }
.tagan-metrics { flex: 0 0 auto; display: flex; gap: 10px; font-size: 11px; color: var(--tx3); white-space: nowrap; }