/* ═══════════════════════════════════════════════════════════
   管理者用：改善フィードバックUI（共有スタイル）
   - 全ページ共通。index.html から抽出して外部化（2026-06-02）
   - マークアップは feedback.js が動的に注入する
   ═══════════════════════════════════════════════════════════ */
#kfb-root, #kfb-root * { box-sizing: border-box; }
#kfb-root {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --kfb-sumi:#101f1f; --kfb-seiji:#2e5e5e; --kfb-paper:#f2f4f4;
  --kfb-line:#d6dede; --kfb-dim:#6b7a7a; --kfb-red:#b3402f; --kfb-gray:#8a9797;
}
/* フローティングボタン */
#kfb-fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9200;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.1rem; border:none; border-radius:999px; cursor:pointer;
  background:var(--kfb-sumi); color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.04em; box-shadow:0 6px 20px rgba(16,31,31,.28);
  transition:transform .15s ease, background .15s ease;
}
#kfb-fab:hover { background:var(--kfb-seiji); transform:translateY(-1px); }
#kfb-fab .kfb-badge {
  position:absolute; top:-5px; right:-5px; min-width:19px; height:19px;
  padding:0 4px; border-radius:999px; background:var(--kfb-red); color:#fff;
  font-size:10px; font-weight:700; line-height:19px; text-align:center;
}
/* オーバーレイ + モーダル */
#kfb-modal {
  display:none; position:fixed; inset:0; z-index:9300;
  background:rgba(16,31,31,.42); align-items:center; justify-content:center; padding:1rem;
}
#kfb-modal.kfb-open { display:flex; }
.kfb-card {
  background:#fff; border-radius:16px; width:100%; max-width:500px;
  max-height:88vh; overflow-y:auto; padding:1.5rem 1.6rem;
  box-shadow:0 18px 50px rgba(16,31,31,.25);
}
.kfb-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.kfb-title { font-size:1rem; font-weight:700; color:var(--kfb-sumi); }
.kfb-x { background:none; border:none; cursor:pointer; color:var(--kfb-dim); display:flex; padding:4px; border-radius:6px; }
.kfb-x:hover { background:var(--kfb-paper); }
.kfb-label { font-size:.72rem; font-weight:700; color:var(--kfb-dim); margin:0 0 .45rem; letter-spacing:.04em; }
.kfb-field { margin-bottom:1.05rem; }
/* ステータス pill */
.kfb-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.kfb-pill {
  padding:.4rem .9rem; border-radius:999px; border:1.5px solid var(--kfb-line);
  background:#fff; color:var(--kfb-dim); font-size:.8rem; font-weight:600; cursor:pointer;
  transition:all .12s ease; user-select:none;
}
.kfb-pill[data-on="1"] { color:#fff; }
.kfb-pill[data-status="fix"][data-on="1"]  { background:var(--kfb-red);   border-color:var(--kfb-red); }
.kfb-pill[data-status="idea"][data-on="1"] { background:var(--kfb-seiji); border-color:var(--kfb-seiji); }
.kfb-pill[data-status="hold"][data-on="1"] { background:var(--kfb-gray);  border-color:var(--kfb-gray); }
/* textarea */
#kfb-text {
  width:100%; min-height:96px; resize:vertical; border:1.5px solid var(--kfb-line);
  border-radius:10px; padding:.75rem .8rem; font-size:max(16px,.9rem); color:var(--kfb-sumi);
  font-family:inherit; outline:none; line-height:1.6;
}
#kfb-text:focus { border-color:var(--kfb-seiji); }
/* セクション checkbox */
.kfb-checks { display:grid; grid-template-columns:repeat(2,1fr); gap:.45rem .7rem; }
.kfb-check {
  display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border:1.5px solid var(--kfb-line);
  border-radius:9px; cursor:pointer; font-size:.82rem; color:var(--kfb-sumi); transition:all .12s ease;
}
.kfb-check:hover { border-color:var(--kfb-seiji); }
.kfb-check input { accent-color:var(--kfb-seiji); width:15px; height:15px; cursor:pointer; flex-shrink:0; }
.kfb-check.kfb-checked { border-color:var(--kfb-seiji); background:rgba(46,94,94,.06); }
#kfb-other-detail {
  display:none; margin-top:.55rem; width:100%; border:1.5px solid var(--kfb-line);
  border-radius:8px; padding:.5rem .7rem; font-size:max(16px,.82rem); color:var(--kfb-sumi);
  font-family:inherit; outline:none;
}
#kfb-other-detail:focus { border-color:var(--kfb-seiji); }
/* メッセージ + フッター */
#kfb-msg { font-size:.78rem; min-height:1.2em; margin:.2rem 0 .7rem; }
.kfb-actions { display:flex; gap:.6rem; justify-content:flex-end; }
.kfb-btn {
  padding:.55rem 1.3rem; border-radius:9px; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.kfb-btn-ghost { border:1.5px solid var(--kfb-line); background:#fff; color:var(--kfb-dim); }
.kfb-btn-ghost:hover { background:var(--kfb-paper); }
.kfb-btn-primary { border:none; background:var(--kfb-sumi); color:#fff; }
.kfb-btn-primary:hover { background:var(--kfb-seiji); }
.kfb-foot {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--kfb-paper);
}
.kfb-link { background:none; border:none; cursor:pointer; font-size:.75rem; color:var(--kfb-dim); text-decoration:underline; font-family:inherit; padding:0; }
.kfb-link:hover { color:var(--kfb-seiji); }
/* 履歴ビュー */
#kfb-history { display:none; }
.kfb-item { border:1px solid var(--kfb-line); border-radius:10px; padding:.75rem .85rem; margin-bottom:.6rem; }
.kfb-item-top { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; flex-wrap:wrap; }
.kfb-tag { font-size:.68rem; font-weight:700; color:#fff; padding:.12rem .5rem; border-radius:999px; }
.kfb-tag.fix { background:var(--kfb-red); } .kfb-tag.idea { background:var(--kfb-seiji); } .kfb-tag.hold { background:var(--kfb-gray); }
.kfb-tag.done { background:#3a7d44; }
.kfb-sec-chip { font-size:.66rem; color:var(--kfb-dim); background:var(--kfb-paper); padding:.1rem .45rem; border-radius:6px; }
.kfb-time { font-size:.68rem; color:#9aa8a8; margin-left:auto; }
.kfb-item-body { font-size:.84rem; color:var(--kfb-sumi); line-height:1.55; white-space:pre-wrap; }
.kfb-item-path { font-size:.64rem; color:#9aa8a8; margin-top:.35rem; font-family:"JetBrains Mono", monospace; }
.kfb-item-actions { display:flex; gap:.9rem; align-items:center; margin-top:.4rem; }
.kfb-del { background:none; border:none; cursor:pointer; color:#c0392b; font-size:.7rem; padding:0; text-decoration:underline; font-family:inherit; }
.kfb-done { background:none; border:none; cursor:pointer; color:#3a7d44; font-size:.7rem; padding:0; text-decoration:underline; font-family:inherit; }
.kfb-item.kfb-resolved { opacity:.55; }
.kfb-item.kfb-resolved .kfb-item-body { text-decoration:line-through; text-decoration-color:#9aa8a8; }
.kfb-empty { text-align:center; color:var(--kfb-dim); font-size:.85rem; padding:2rem 0; }
/* スクショ添付 */
.kfb-shots-drop {
  border:1.5px dashed var(--kfb-line); border-radius:10px; padding:.7rem .8rem;
  font-size:.78rem; color:var(--kfb-dim); cursor:pointer; transition:all .12s ease;
  display:flex; align-items:center; gap:.5rem;
}
.kfb-shots-drop:hover { border-color:var(--kfb-seiji); color:var(--kfb-seiji); }
.kfb-shots-drop.kfb-dragover { border-color:var(--kfb-seiji); color:var(--kfb-seiji); background:rgba(46,94,94,.07); }
.kfb-thumbs { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.55rem; }
.kfb-thumb { position:relative; width:60px; height:60px; border-radius:8px; overflow:hidden; border:1px solid var(--kfb-line); }
.kfb-thumb img { width:100%; height:100%; object-fit:cover; display:block; cursor:pointer; }
.kfb-thumb-x {
  position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:999px;
  background:rgba(16,31,31,.78); color:#fff; border:none; cursor:pointer; font-size:11px;
  line-height:16px; text-align:center; padding:0;
}
.kfb-item-thumbs { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.45rem; }
.kfb-item-thumbs img { width:54px; height:54px; object-fit:cover; border-radius:6px; border:1px solid var(--kfb-line); cursor:pointer; }
/* ライトボックス */
#kfb-lightbox { display:none; position:fixed; inset:0; z-index:9400; background:rgba(16,31,31,.82); align-items:center; justify-content:center; padding:2rem; cursor:zoom-out; }
#kfb-lightbox.kfb-open { display:flex; }
#kfb-lightbox img { max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.4); }
@media (max-width:480px){ .kfb-checks { grid-template-columns:1fr; } }