/* ui-kit から配った写し。ここを直さない（正本 key3media/ui-kit parts/kit-grid/kit-grid.css、版 95054ee） */
/* kit-grid（CMP-006 グリッド）の見た目。色は kit-tokens の名前だけで書く。正本 key3media/ui-kit parts/kit-grid/ */
.kg [hidden],.kg-pop[hidden]{display:none!important}
.kg{display:flex;flex-direction:column;gap:8px;min-width:0}
.kg-sp{flex:1}
.kg .kb{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:28px;padding:0 10px;border-radius:var(--kit-r);font:inherit;font-size:12.5px;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.kg .kb.pri{background:var(--kit-accent);color:var(--kit-accent-ink)}
.kg .kb.plain{background:var(--kit-surface);color:var(--kit-ink);border-color:var(--kit-line-strong)}
.kg .kb.go{background:var(--kit-go-fill);color:var(--kit-fill-ink)}
.kg .kb.ng{background:var(--kit-ng-fill);color:var(--kit-fill-ink)}
.kg .kb:disabled{opacity:.7;cursor:progress}

/* フィルターバー（CMP-008）：検索 → 件数 → 操作 → 追加 */
.kg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kg-bar select,.kg-q{height:30px;border:1px solid var(--kit-line-strong);border-radius:var(--kit-r-sm);background:var(--kit-surface);color:var(--kit-ink);font:inherit;padding:0 8px;min-width:0}
.kg-q{width:220px;max-width:100%}
.kg-cnt{font-size:var(--kit-fs-sm);color:var(--kit-muted)}
.kg-filt{font-size:12px;color:var(--kit-warn-ink);background:var(--kit-warn-soft);border-radius:var(--kit-r-sm);padding:1px 6px}

/* ビュー（名前を付けた条件） */
.kg-views{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-left:6px;padding-left:10px;border-left:1px solid var(--kit-line)}
.kg-vl{font-size:12px;color:var(--kit-muted);font-weight:700;margin-right:2px}
.kg-chip{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 9px;border:1px solid var(--kit-line-strong);border-radius:12px;background:var(--kit-surface);color:var(--kit-ink-2);font:inherit;font-size:12px;cursor:pointer}
.kg-chip button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center}
.kg-chip.on{border-color:var(--kit-accent);color:var(--kit-accent-text);background:var(--kit-accent-soft);font-weight:700}
.kg-vx{margin-left:4px;opacity:.7}
.kg-vadd{border-style:dashed}

/* 直した所・選んだ所の帯 */
.kg-edit,.kg-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--kit-r);font-size:13px}
.kg-edit{background:var(--kit-warn-soft);color:var(--kit-warn-ink)}
.kg-edit-t{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.kg-selbar{background:var(--kit-accent-soft);color:var(--kit-ink)}
.kg-sel-t{font-weight:700}
.kg-link{background:none;border:0;padding:0 4px;color:var(--kit-accent-text);font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer}
.kg-bulk{display:flex;gap:6px;flex-wrap:wrap}

/* 表。見出しは上に、合計は下に、ID と操作（と固定した列）は左に残る */
.kg-box{overflow:auto;max-height:70vh;border:1px solid var(--kit-line);border-radius:var(--kit-panel-r);background:var(--kit-surface);outline:none}
.kg-t{border-collapse:separate;border-spacing:0;table-layout:fixed}
.kg-t th{height:36px}
.kg-t td{height:var(--kg-row-h,36px)}
.kg-t th,.kg-t td{padding:0 8px;border-bottom:1px solid var(--kit-line);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--kit-surface);color:var(--kit-ink)}
.kg-t thead th{position:sticky;top:0;z-index:3;background:var(--kit-surface-2);font-size:12px;font-weight:700;color:var(--kit-ink-2);cursor:pointer;user-select:none}
.kg-t thead th[draggable="true"]{cursor:grab}
.kg-t thead th.kg-over{box-shadow:inset 3px 0 0 var(--kit-accent)}
.kg-t thead th.kg-on{color:var(--kit-accent-text)}
.kg-t tfoot td{position:sticky;bottom:0;z-index:3;background:var(--kit-surface-2);font-weight:700;border-top:1px solid var(--kit-line-strong)}
.kg-t .kg-fx{position:sticky;z-index:2}
.kg-t thead th.kg-fx,.kg-t tfoot td.kg-fx{z-index:4}
.kg-t .kg-fxl{border-right:1px solid var(--kit-line-strong)}
.kg-t .kg-n{text-align:right}
/* 札の列は見出しも札も中央（数字は右・字は左。11/05 矢吹さん） */
.kg-t .kg-c{text-align:center}
.kg-t .kg-c .kg-th{justify-content:center;position:relative;padding:0 22px}
/* 中央の列：見出しの字を列のまん中に置くため、メニューの点は右端に重ねる（11/05 矢吹さん「ズレて見える」） */
.kg-t .kg-c .kg-cm{position:absolute;right:0;top:50%;margin:-10px 0 0}
.kg-th{display:flex;align-items:center;gap:2px;min-width:0}
.kg-t .kg-n .kg-th{justify-content:flex-end}
.kg-tt{overflow:hidden;text-overflow:ellipsis}
.kg-ar,.kg-fi{color:var(--kit-accent-text);display:inline-flex}
.kg-cm{margin-left:auto;flex:none;width:20px;height:20px;border:0;border-radius:var(--kit-r-sm);background:none;color:var(--kit-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:.55}
.kg-t th:hover .kg-cm,.kg-cm:focus-visible{opacity:1;background:var(--kit-hover)}
.kg-t .kg-n .kg-cm{margin:0 4px 0 0;order:-1}
/* 右の列：見出しの字の右端を数字の右端に揃えるため、メニューの点は字の左に置く */
.kg-rz{position:absolute;right:0;top:0;bottom:0;width:7px;cursor:col-resize}
.kg-rz:hover{background:var(--kit-accent-soft)}
.kg-selc{text-align:center!important;padding:0!important}
.kg-t tbody tr:hover td{background-image:linear-gradient(var(--kit-hover),var(--kit-hover))}
.kg-t tbody tr:focus{outline:none}
.kg-t tbody tr:focus td{box-shadow:inset 0 2px 0 var(--kit-accent),inset 0 -2px 0 var(--kit-accent)}
.kg-t tbody tr.kg-sel td{background-image:linear-gradient(var(--kit-accent-soft),var(--kit-accent-soft))}
.kg-pad td{padding:0;border:0;height:auto}
.kg-u{margin-left:.25em;font-size:.85em;color:var(--kit-muted);font-weight:400}
.kg-hl{background:var(--kit-warn-soft);color:inherit;border-radius:2px;padding:0 1px}
.kg-open{color:var(--kit-accent-text);text-decoration:none}
.kg-open:hover{text-decoration:underline}

/* 条件で色（行の左に色の線、字は読める色のまま） */
.kg-t tr.kg-tone-bad td:first-child{box-shadow:inset 3px 0 0 var(--kit-bad)}
.kg-t tr.kg-tone-warn td:first-child{box-shadow:inset 3px 0 0 var(--kit-warn)}
.kg-t tr.kg-tone-ok td:first-child{box-shadow:inset 3px 0 0 var(--kit-ok)}
/* 色は地（--kit-surface）の上に重ねる。固定した列の下が透けないように、地はいつも塗りつぶす（11/05 矢吹さん） */
.kg-t tr.kg-tone-bad td{background-image:linear-gradient(var(--kit-bad-soft),var(--kit-bad-soft))}
.kg-t tr.kg-tone-muted td{color:var(--kit-muted)}

/* 直せるセル・直したセル */
.kg-t td.kg-ed{cursor:text}
.kg-t td.kg-dirty{background-image:linear-gradient(var(--kit-warn-soft),var(--kit-warn-soft))!important;box-shadow:inset 0 0 0 1px var(--kit-warn)}
.kg-cell-in{width:100%;height:28px;border:1px solid var(--kit-accent);border-radius:var(--kit-r-sm);background:var(--kit-surface);color:var(--kit-ink);font:inherit;padding:0 6px}

/* グループの見出し行 */
.kg-grp td{background:var(--kit-surface-2)!important;padding:0 6px}
.kg-gt{display:flex;align-items:center;gap:8px;width:100%;height:100%;border:0;background:none;color:var(--kit-heading);font:inherit;font-size:13px;cursor:pointer;text-align:left}
.kg-gn{font-size:12px;color:var(--kit-muted)}

/* 読み込み中・0件 */
.kg-sk{display:block;height:10px;border-radius:5px;background:var(--kit-surface-2);animation:kgsk 1.2s ease-in-out infinite}
@keyframes kgsk{50%{opacity:.45}}
.kg-load{margin:8px;font-size:12px;color:var(--kit-muted)}
.kg-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 16px;text-align:center;color:var(--kit-ink-2)}
.kg-empty b{color:var(--kit-heading)}
.kg-empty span{font-size:13px}

/* 下の帯：件数・選んだ件数と合計・ページ送り */
.kg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--kit-fs-sm);color:var(--kit-muted)}
.kg-status b,.kg-status .kit-num{color:var(--kit-ink)}
.kg-pg{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.kg-sz select{height:26px;border:1px solid var(--kit-line-strong);border-radius:var(--kit-r-sm);background:var(--kit-surface);color:var(--kit-ink)}
.kg-pb{min-width:26px;height:26px;padding:0 6px;border:1px solid var(--kit-line-strong);border-radius:var(--kit-r-sm);background:var(--kit-surface);color:var(--kit-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.kg-pb.on{background:var(--kit-accent);border-color:var(--kit-accent);color:var(--kit-accent-ink);font-weight:700}
.kg-pb:disabled{opacity:.45;cursor:default}

/* 小窓（列のメニュー・絞り込み・操作・ビュー） */
.kg-pop{position:absolute;z-index:70;min-width:220px;max-width:min(320px,calc(100vw - 16px));max-height:70vh;overflow:auto;background:var(--kit-surface);border:1px solid var(--kit-line);border-radius:var(--kit-r);box-shadow:var(--kit-shadow-lg);padding:8px;color:var(--kit-ink);font-size:13px}
.kg-pt{font-weight:700;color:var(--kit-heading);padding:4px 6px 6px}
.kg-pn{margin:0 6px 8px;font-size:12px;color:var(--kit-muted)}
.kg-menu{display:flex;flex-direction:column}
.kg-menu button{display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;border-radius:var(--kit-r-sm);background:none;color:var(--kit-ink);font:inherit;text-align:left;cursor:pointer}
.kg-menu button:hover,.kg-menu button:focus-visible{background:var(--kit-hover)}
.kg-menu button:disabled{opacity:.45;cursor:default;background:none}
.kg-menu hr{border:0;border-top:1px solid var(--kit-line);margin:4px 0;width:100%}
.kg-in{width:100%;height:30px;border:1px solid var(--kit-line-strong);border-radius:var(--kit-r-sm);background:var(--kit-surface);color:var(--kit-ink);font:inherit;padding:0 8px;margin-bottom:6px}
.kg-fa{display:flex;gap:6px;margin-bottom:4px}
.kg-fl{display:flex;flex-direction:column;max-height:240px;overflow:auto}
.kg-fl label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--kit-r-sm);cursor:pointer}
.kg-fl label:hover{background:var(--kit-hover)}
.kg-fl label[hidden]{display:none}
.kg-fc{margin-left:auto;font-size:11.5px;color:var(--kit-muted);font-family:var(--kit-f-num)}
.kg-rl{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--kit-ink-2);margin:0 6px}
.kg-pa{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.kg-spin{width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:kgspin .8s linear infinite}
@keyframes kgspin{to{transform:rotate(360deg)}}

/* スマホの幅：カードの並び。写真の高さ＝右の文字と札を合わせた高さ（rules §2） */
.kg-cards{display:none}
.kg-card-mode .kg-box{display:none}
.kg-card-mode .kg-cards{display:flex;flex-direction:column;gap:8px}
.kg-card{display:flex;align-items:stretch;gap:10px;background:var(--kit-surface);border:1px solid var(--kit-line);border-radius:var(--kit-r);padding:8px;cursor:pointer}
.kg-card.kg-sel{border-color:var(--kit-accent);background:var(--kit-accent-soft)}
.kg-card.kg-tone-bad{border-left:3px solid var(--kit-bad)}
.kg-cv{width:44px;flex:none;align-self:stretch;border-radius:var(--kit-r-sm);overflow:hidden;display:flex}
.kg-cv>*{width:100%;height:100%;object-fit:cover}
.kg-cb{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.kg-cb b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-cs{font-size:12px;color:var(--kit-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-ct{display:flex;gap:4px;flex-wrap:wrap}
.kg-card .kg-pick{align-self:center}
.kg-cgrp{font-size:12px;font-weight:700;color:var(--kit-heading);padding:4px 2px}
.kg-cgrp span{margin-left:8px;font-weight:400;color:var(--kit-muted)}
.kg-card.kg-skel .kg-cv{height:52px}
.kg-card.kg-skel .kg-cb{justify-content:center;gap:8px}
.kg-card-mode .kg-views{border-left:0;margin-left:0;padding-left:0}

/* 上の帯を出さない（o.bar === false） */
.kg-nobar>.kg-bar{display:none}
/* 表紙の列（type:'cover'）。行の高さに合わせ、縦長 2:3 に切り抜く */
.kg-t td .kg-tcv{display:block;height:calc(var(--kg-row-h,36px) - 8px);aspect-ratio:2/3;overflow:hidden;border-radius:var(--kit-r-sm);background:var(--kit-surface-2)}
.kg-t td .kg-tcv img{width:100%;height:100%;object-fit:cover;display:block}
.kg-t.kg-full{width:100%}
/* 帯を出さないとき、下の帯が枠の線にくっつかないように */
.kg-nobar>.kg-foot{padding:8px 12px}