/* 表示項目モーダル（2026-08-25 Makoto指示）
   トップページに元々あったものを、業種・テーマ・ランキングでも使えるよう共通化した。
   見た目はトップと完全に同じにする。ページごとに分岐は持たせない。 */

.custom-btn{min-height:36px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card-bg);color:var(--fg);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap}
.custom-btn:hover,.custom-btn[aria-expanded="true"]{border-color:rgba(56,97,251,.7);background:rgba(56,97,251,.08);color:var(--accent)}
.custom-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:6px;background:rgba(56,97,251,.12);color:var(--accent);font-size:10px}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(3,7,18,.64);backdrop-filter:blur(8px);z-index:100;align-items:center;justify-content:center;padding:18px}
.modal-overlay.show{display:flex}
.modal{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;max-width:660px;width:100%;max-height:min(760px,92vh);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.28);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:18px;line-height:1.35}
.modal-head p{margin-top:4px;color:var(--fg2);font-size:12px}
.modal-close{border:0;background:transparent;color:var(--gray);font-size:12px;font-weight:700;cursor:pointer}
.modal-close:hover{color:var(--fg)}
.modal-body{overflow-y:auto;padding:18px 22px 22px}
.modal-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.modal-section-head h4{font-size:13px}
.modal-section-head span{color:var(--gray);font-size:11px}
.selected-col-list{display:grid;gap:7px;min-height:50px}
.selected-col-row{min-height:44px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 7px 5px 10px;border:1px solid var(--border);border-radius:9px;background:var(--bg);cursor:grab}
.selected-col-row.dragging{opacity:.45;border-color:var(--accent)}
.selected-col-order{color:var(--gray);font-size:11px;font-variant-numeric:tabular-nums}
.selected-col-row strong{font-size:12px}
.selected-col-actions{display:flex;gap:5px}
.selected-col-actions button,.available-col{min-height:30px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:var(--card-bg);color:var(--fg2);font-size:10px;font-weight:650;cursor:pointer}
.selected-col-actions button:hover,.available-col:hover{border-color:rgba(56,97,251,.65);color:var(--accent);background:rgba(56,97,251,.06)}
.selected-col-actions button:disabled{opacity:.35;cursor:not-allowed}
.available-cols{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.available-col.active{border-color:rgba(56,97,251,.7);background:rgba(56,97,251,.1);color:var(--accent)}
.modal-divider{height:1px;margin:18px 0;background:var(--border)}
.modal-empty{display:flex;align-items:center;justify-content:center;min-height:70px;border:1px dashed var(--border);border-radius:9px;color:var(--gray);font-size:12px}
.modal-actions{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid var(--border)}
.modal-actions-right{display:flex;gap:8px}
.btn{min-height:38px;padding:0 14px;border:1px solid var(--border);border-radius:9px;background:var(--card-bg);color:var(--fg);font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{border-color:rgba(56,97,251,.6);color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:#2d54e0;border-color:#2d54e0;color:#fff}

/* 表示項目ボタンを置くための行 */
.col-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 24px}

@media(max-width:768px){
  .col-tools{padding:8px 12px}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-height:92vh;border-radius:16px 16px 0 0}
  .modal-head,.modal-body,.modal-actions{padding-left:16px;padding-right:16px}
  .selected-col-row{grid-template-columns:28px minmax(0,1fr)}
  .selected-col-actions{grid-column:1/-1;justify-content:flex-end;padding-bottom:3px}
  .modal-actions{align-items:stretch;flex-direction:column}
  .modal-actions-right{display:grid;grid-template-columns:1fr 1fr}
  .modal-actions .btn{justify-content:center}
}

@media(min-width:769px){
  .col-tools{padding-left:var(--side-pad);padding-right:var(--side-pad)}
}