/* ui-kit から配ったコピー。ここを直さない（正本 key3media/ui-kit parts/kit-grid/kit-grid.css、版 d06577b） */
/* 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,.kg-pop .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:var(--kit-fs-s);font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.kg .kb.pri,.kg-pop .kb.pri{background:var(--kit-accent);color:var(--kit-accent-ink)}
.kg .kb.plain,.kg-pop .kb.plain{background:var(--kit-surface);color:var(--kit-ink);border-color:var(--kit-line-strong)}
.kg .kb.go,.kg-pop .kb.go{background:var(--kit-go-fill);color:var(--kit-fill-ink)}
.kg .kb.ng,.kg-pop .kb.ng{background:var(--kit-ng-fill);color:var(--kit-fill-ink)}
.kg .kb:disabled,.kg-pop .kb:disabled{opacity:.7;cursor:progress}

/* フィルターバー（CMP-008）：検索 → 件数 → 操作 → 追加 */
.kg-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kg-acts{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.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-s);color:var(--kit-muted)}
.kg-filt{font-size:var(--kit-fs-s);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:var(--kit-fs-s);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:var(--kit-fs-s);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:var(--kit-fs-s)}
.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:var(--kit-fs-s);text-decoration:underline;cursor:pointer}
.kg-bulk{display:flex;gap:6px;flex-wrap:wrap}
/* カードの形（狭い幅）では、選んだ数の帯を画面の下に浮かせる。上に出すとカードが帯の高さだけ下へずれるため（390 で 77px。UI/UX 担当の案）。
   最後のカードとページ送りが帯に隠れないよう、選んでいる間だけ表の下に余白を足す */
.kg-card-mode .kg-selbar:not([hidden]){position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;
  background:linear-gradient(var(--kit-accent-soft),var(--kit-accent-soft)),var(--kit-surface);border:1px solid var(--kit-accent);box-shadow:var(--kit-shadow-lg)}
.kg-card-mode.kg-has-sel{padding-bottom:120px}

/* 表。見出しは上に、合計は下に、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:var(--kit-fs-s);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)}
/* 揃え：数字と日付は右、ほか（字・バッジ）は左。見出しの字も同じ揃え（11/05 21:58 矢吹さん「日付、数値型以外、全部素直に左寄せ」） */
.kg-t .kg-n{text-align:right}
.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}
/* 「…」で切れた字は、なぞると全文・スマホは長押しで全文（kit-tooltip の kit-trunc、11/06 UI/UX 担当 O-3）。セルは表のセルのままにする */
.kg-t td.kit-trunc{display:table-cell}
.kg-ar,.kg-fi{color:var(--kit-accent-text);display:inline-flex}
/* 列のメニュー（⋮）は場所を取らない：普段は隠し、見出しにマウスを乗せたとき・キーボードで来たときだけ端に重ねて出す。
   右クリックでも開く。見出しはそのままつかんで動かせる（11/05 矢吹さん「点が3つは邪魔」） */
.kg-cm{position:absolute;top:50%;right:9px;margin-top:-10px;width:20px;height:20px;border:0;border-radius:var(--kit-r-sm);background:var(--kit-surface-2);color:var(--kit-ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0}
.kg-t .kg-n .kg-cm{right:auto;left:4px}
.kg-t th:hover .kg-cm,.kg-cm:focus-visible{opacity:1}
.kg-cm:hover{background:var(--kit-hover)}
/* 列の区切り線（見出し）と、幅を変えるつまみ（線の上 8px、乗せると色の線） */
.kg-t thead th{border-right:1px solid var(--kit-line-strong)}
.kg-t thead th:last-child{border-right:0}
.kg-rz{position:absolute;right:0;top:0;bottom:0;width:9px;cursor:col-resize;z-index:1}
.kg-rz::after{content:"";position:absolute;right:0;top:6px;bottom:6px;width:3px;border-radius:1px;background:transparent}
.kg-rz:hover::after,.kg-rz.on::after{background:var(--kit-accent)}
.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:var(--kit-fs-s);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:var(--kit-fs-s);cursor:pointer;text-align:left}
.kg-gn{font-size:var(--kit-fs-s);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:var(--kit-fs-s);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:var(--kit-fs-s)}

/* 下の帯：件数・選んだ件数と合計・ページ送り */
.kg-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--kit-fs-s);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:var(--kit-fs-s)}
.kg-pt{font-weight:700;color:var(--kit-heading);padding:4px 6px 6px}
.kg-pn{margin:0 6px 8px;font-size:var(--kit-fs-s);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{box-sizing:border-box;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:var(--kit-fs-xs);color:var(--kit-muted);font-family:var(--kit-f-num)}
.kg-rl{display:flex;flex-direction:column;gap:2px;font-size:var(--kit-fs-s);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:var(--kit-fs-m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-cs{font-size:var(--kit-fs-s);color:var(--kit-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-ct{display:flex;gap:4px;flex-wrap:wrap}
/* バッジの包み（幅をそろえる印）。箱を作らず、バッジの形も並びも変えない */
.kg-tg{display:contents}
.kg-card .kg-pick{align-self:center}
.kg-cgrp{font-size:var(--kit-fs-s);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}
/* 指でタップする端末（スマホ・タブレット）：クリックできるものは縦横 32px 以上（UIチェック S-7、tools/hit.js で測る。11/06） */
.kg-pkw{display:inline-grid;place-items:center;cursor:pointer}
@media (pointer:coarse){
  .kg .kb,.kg-pop .kb{height:32px}
  .kg-chip{height:32px;border-radius:16px;padding:0 12px}
  .kg-pb{min-width:32px;height:32px}
  .kg-sz select,.kg-bar select,.kg-q{height:32px}
  .kg-pkw{min-width:32px;min-height:32px;margin:-6px}
  /* 行を開く件名のリンクは、字の上下に透明なすきまを足してクリックできる所を 32px 以上に（行の高さは変わらない。11/06 UI/UX 担当） */
  .kg-open{padding:8px 0}
  .kg-card b.kit-trunc{position:relative;z-index:1;padding-block:6px;margin-block:-6px}
}
/* マウスを乗せられない端末では、列のメニュー（⋮）を薄い字の色（--kit-muted、地との比 3:1 以上）で出しておき、32px にする（11/06 UI/UX 担当） */
@media (hover:none){
  .kg-cm{opacity:1;color:var(--kit-muted);width:32px;height:32px;margin-top:-16px;right:10px;background:none}
}