/* グリッド編集ビューの「お試し」（2026-10-07）。
   プラグインのコードは使わず、サイト用に一から書いた縮小版。見た目は本物に合わせている */
.gd { --gd-blue: #1d4ed8; font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #333; letter-spacing: 0; background: #fff; border: 1px solid #e3e7e8; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(31, 45, 61, .08); position: relative; }
.gd *, .gd *::before, .gd *::after { box-sizing: border-box; }
.gd.is-full { position: fixed; inset: 0; z-index: 1000; border-radius: 0; display: flex; flex-direction: column; }
.gd.is-full .gd-host { max-height: none; flex: 1; }

/* kintone の一覧の上の帯（飾り） */
.gd-kbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.gd-view { display: flex; align-items: center; border: 2px solid #3498db; border-radius: 4px; overflow: hidden; height: 40px; }
.gd-view__name { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #fff; color: #3498db; font-size: 14px; min-width: 190px; height: 100%; }
.gd-view__name svg { width: 26px; height: 20px; }
.gd-view__caret { margin-left: auto; color: #3498db; }
.gd-view__graph { background: #3498db; color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%; }
.gd-kicon { width: 40px; height: 40px; border: 1px solid #e3e7e8; border-radius: 4px; display: grid; place-items: center; color: #8a9296; background: #f7f9fa; }
.gd-kicon svg { width: 20px; height: 20px; }

.gd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 4px 16px 10px; }
.gd-count { font-size: 13px; font-weight: 700; }
.gd-search { display: inline-flex; align-items: center; gap: 4px; }
.gd-search__box { position: relative; display: inline-flex; align-items: center; }
.gd-search input[type=text] { font-size: 13px; padding: 4px 24px 4px 8px; border: 1px solid #d9e2ec; border-radius: 4px; width: 150px; font-family: inherit; }
.gd-search__clear { position: absolute; right: 4px; border: 0; background: none; color: #9aa5b1; font-size: 12px; cursor: pointer; }
.gd-search__count { font-size: 12px; color: #7b8794; min-width: 40px; text-align: center; }
.gd-search label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #52606d; cursor: pointer; white-space: nowrap; }
.gd-btn { padding: 5px 12px; font-size: 13px; border: 1px solid #d9e2ec; border-radius: 4px; background: #fff; color: #333; cursor: pointer; font-family: inherit; white-space: nowrap; }
.gd-btn:hover { background: #f5f7fa; }
.gd-btn[disabled] { opacity: .45; cursor: default; }
.gd-btn[disabled]:hover { background: #fff; }
.gd-btn--primary { background: var(--gd-blue); color: #fff; border-color: var(--gd-blue); }
.gd-btn--primary:hover { background: #1a43bf; }
.gd-btn--help { width: 28px; height: 28px; border-radius: 50%; padding: 0; font-weight: 700; }
.gd-saving { font-size: 13px; color: var(--gd-blue); font-weight: 700; }
.gd-msg { font-size: 13px; padding: 0 16px; min-height: 0; }
.gd-msg:not(:empty) { padding: 0 16px 8px; }
.gd-msg--ok { color: #1a7a3e; } .gd-msg--warn { color: #975a16; }

.gd-host { max-height: 460px; overflow: auto; border-top: 1px solid #d9e2ec; background: #fff; outline: none; }
.gd-table { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; table-layout: fixed; user-select: none; width: 100%; }
.gd-th, .gd-td { border-bottom: 1px solid #e4e7eb; border-right: 1px solid #eef1f4; padding: 6px 10px; text-align: left; overflow: hidden; text-overflow: ellipsis; height: 33px; }
.gd-th { position: sticky; top: 0; z-index: 2; background: #f0f4f8; font-weight: 700; cursor: pointer; }
.gd-th__in { display: flex; align-items: center; gap: 4px; }
.gd-th__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.gd-arrow { color: var(--gd-blue); font-size: 11px; }
.gd-lock { font-size: 10px; opacity: .5; }
.gd-td { cursor: cell; background: #fff; position: relative; }
.gd-table tbody tr:nth-child(even) .gd-td { background: #fafbfc; }
.gd-table tbody tr:hover .gd-td { background: #eef5ff; }
.gd-td.is-num { text-align: right; }
.gd-td.is-cf { background: #fdd !important; }
.gd-td.is-sel { background: #eaeef0 !important; }
.gd-td.is-active { box-shadow: inset 0 0 0 2px #5f6b7a; background: #dde3e7 !important; }
.gd-td.is-dirty { background: #fffaf0 !important; box-shadow: inset 0 0 0 1px #f6c270; }
.gd-td.is-dirty.is-active { box-shadow: inset 0 0 0 2px #dd6b20; }
.gd-td.is-hit { background: #fff3c4 !important; }
.gd-td.is-hit-active { background: #ffd866 !important; box-shadow: inset 0 0 0 2px #d69e2e; }
.gd-td.is-ro { color: #555; }
.gd-td a { color: #3498db; text-decoration: none; pointer-events: none; }
.gd-rowhead { position: sticky; left: 0; z-index: 1; width: 34px; min-width: 34px; padding: 0; text-align: center; background: #f7f9fa; border-bottom: 1px solid #e4e7eb; border-right: 1px solid #eef1f4; cursor: pointer; }
.gd-th.gd-rowhead { z-index: 3; background: #f0f4f8; }
.gd-rowhead button { border: 0; background: none; cursor: pointer; font-size: 13px; color: #5f6b7a; padding: 4px 6px; border-radius: 3px; }
.gd-rowhead button:hover { background: #d6e4ff; color: var(--gd-blue); }
.gd-tr--new .gd-td { background: #f0fff4 !important; }
.gd-tr--new .gd-rowhead { background: #d7f5e0; }
.gd-tr--del .gd-td { text-decoration: line-through; color: #9b2c2c; background: #fff5f5 !important; }
.gd-tr--del .gd-rowhead { background: #fed7d7; }
.gd-tr--rowsel .gd-rowhead { background: #d6e4ff; }
.gd-editor { position: absolute; inset: 0; width: 100%; height: 100%; font: inherit; font-size: 13px; border: 2px solid var(--gd-blue); border-radius: 2px; padding: 4px 8px; outline: none; background: #fff; z-index: 2; }

.gd-pop { position: absolute; z-index: 20; background: #fff; border: 1px solid #e3e7e8; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); min-width: 220px; font-size: 13px; }
.gd-pop__head { font-size: 12px; font-weight: 700; color: #888e96; padding: 8px 12px; background: #f7f9fa; border-bottom: 1px solid #e3e7e8; }
.gd-pop__list { max-height: 300px; overflow: auto; padding: 4px 0; }
.gd-pop__row { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; color: #41464b; white-space: nowrap; }
.gd-pop__row:hover { background: #f0f8ff; }
.gd-pop__row.is-drag { opacity: .5; background: #e8eef5; }
.gd-pop__grip { color: #aab2bd; cursor: grab; font-size: 12px; }
.gd-pop__row label { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.gd-pop__actions { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid #e3e7e8; }
.gd-help td { padding: 4px 12px; border-bottom: 1px solid #f0f2f4; }
.gd-help td:first-child { color: #52606d; white-space: nowrap; }

.gd-modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .3); display: grid; place-items: center; z-index: 30; }
.gd-modal { background: #fff; border-radius: 4px; width: 460px; max-width: 92%; box-shadow: 0 8px 32px rgba(0, 0, 0, .3); font-size: 13px; }
.gd-modal__head { font-weight: 700; padding: 14px 18px; border-bottom: 1px solid #e3e7e8; }
.gd-modal__body { padding: 14px 18px; display: grid; gap: 10px; }
.gd-modal__body .row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: 10px; }
.gd-modal__body input[type=text] { font: inherit; padding: 6px 8px; border: 1px solid #d9e2ec; border-radius: 4px; }
.gd-modal__note { color: #7b8794; font-size: 12px; }
.gd-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e3e7e8; }
.gd-modal dl { margin: 0; display: grid; grid-template-columns: 7em 1fr; gap: 6px 12px; }
.gd-modal dt { color: #7b8794; } .gd-modal dd { margin: 0; }

.gd-note { font-size: 12px; color: #7b8794; padding: 8px 16px 12px; border-top: 1px solid #eef1f4; }

/* ページの横幅いっぱいに置く（2026-10-07） */
.gd-wide { padding: 0 4%; position: relative; z-index: 2; }
@media (max-width: 680px) { .gd-wide { padding: 0 16px; } }
.gd-host { max-height: 70vh; }

/* 全画面のときは外枠ごと前に出す */
.gd-wide.is-full-host { z-index: 1000; }