/* =======================
   Styles Gallery (scoped)
   ======================= */

/* === Theme bridge: このモーダル配下だけで使うトークンを定義 === */
.sg-modal{
  /* theme.css / app.css のアプリ共通トークンをブリッジ */
  --sg-bg:          var(--bg);
  --sg-panel:       var(--panel);
  --sg-text:        var(--ink);
  --sg-muted:       var(--muted);
  --sg-border:      var(--border);
  --sg-card:        var(--card);
  --sg-card-hover:  color-mix(in srgb, var(--card) 88%, #fff3);
  --sg-thumb-bg:    var(--bg);
  --sg-chip-bg:     color-mix(in srgb, var(--panel) 65%, transparent);
  --sg-backdrop:    rgba(0,0,0,.55);

  /* アクセント（ライト＝水色 / ダーク＝山吹色：theme.cssのまま） */
  --sg-accent:         var(--accent);
  --sg-accent-ink:     var(--accent-ink, #0b0d12);
}

/* ---- Modal base ---- */
.sg-modal{ position:fixed; inset:0; display:none; z-index:1000; }
.sg-modal[aria-hidden="false"]{ display:block; }

.sg-backdrop{
  position:absolute; inset:0;
  background: var(--sg-backdrop);
  opacity:0; transition:opacity .15s ease;
}
.sg-modal[aria-hidden="false"] .sg-backdrop{ opacity:1; }

.sg-panel{
  position:absolute; inset:6% 6% auto 6%;
  background: var(--sg-panel);
  color: var(--sg-text);
  border-radius:12px;
  border:1px solid var(--sg-border);
  box-shadow: var(--soft-shadow, 0 16px 40px rgba(0,0,0,.45));
  display:flex; flex-direction:column; min-height:66vh; max-height:88vh;
  transform:translateY(8px) scale(.98); opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.sg-modal[aria-hidden="false"] .sg-panel{ transform:none; opacity:1; }
@media (max-width:800px){ .sg-panel{ inset:4%; } }

/* ---- Head / Actions ---- */
.sg-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px; border-bottom:1px solid var(--sg-border);
}
.sg-head h3{ margin:0; font-size:1.05rem; }
.sg-actions{ display:flex; align-items:center; gap:8px; }

#sgSearch{
  min-width:220px; padding:6px 8px;
  background: color-mix(in srgb, var(--sg-panel) 80%, #0000);
  color: var(--sg-text);
  border:1px solid var(--sg-border);
  border-radius:8px;
}
#sgSearch::placeholder{ color: var(--sg-muted); }

/* ---- Tabs ---- */
.sg-tabs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid var(--sg-border);
}
.sg-tab{
  padding:6px 10px; border-radius:999px; cursor:pointer; font-size:.95em;
  border:1px solid color-mix(in srgb, var(--tab-color, var(--accent)) 50%, var(--sg-border));
  background: color-mix(in srgb, var(--tab-color, var(--accent)) 12%, transparent);
  color: var(--sg-text);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sg-tab[aria-selected="true"]{
  background: var(--tab-color, var(--accent));
  border-color: var(--tab-color, var(--accent));
  color: var(--accent-ink);
  font-weight:600;
}

/* ---- Grid ---- */
.sg-grid-wrap{ overflow:auto; flex:1; padding:14px; background:transparent; }
.sg-grid{
  --minW: 180px;
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(var(--minW), 1fr));
}

/* ---- Card ---- */
.sg-card{
  border:1px solid var(--sg-border);
  border-radius:12px; overflow:hidden;
  background: var(--sg-card);
  display:flex; flex-direction:column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
  outline: none; position:relative;
  position: relative;
  overflow: visible;

}
.sg-card:hover{ box-shadow:0 10px 24px rgba(0,0,0,.25); transform:translateY(-1px); }
.sg-card:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent); }
.sg-card.is-selected{
  border-color: var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent) inset;
}

.sg-thumb{
  aspect-ratio:16/9;
  background: var(--sg-thumb-bg);
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  position:relative;
  overflow: hidden;
  min-height:200px;
}
.sg-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }

.sg-body{ padding:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sg-name{
  font-size:.95em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
  color: var(--sg-text);
}

/* Premium ribbon */
.sg-lock{
  position:absolute; top:8px; left:-8px; z-index:2;
  background:#ffd54f; color:#111; font-weight:700; font-size:11px;
  padding:2px 10px; transform:rotate(-12deg);
  border-radius:3px; border:1px solid rgba(0,0,0,.15);
}

/* ---- Footer ---- */
.sg-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 14px; border-top:1px solid var(--sg-border);
}
.sg-count{ font-size:.9em; color: var(--sg-muted); }
.sg-foot-right .btn{ min-width:9rem; }

/* ---- Add card (first) ---- */
.sg-card.add{ border-style:dashed; border-color:var(--sg-border); background: var(--sg-card); }
.sg-card.add .sg-thumb{ color: var(--sg-muted); display:grid; place-items:center; }
.sg-plus{ display:grid; gap:8px; place-items:center; font-size:.92em; }
.sg-plus .mark{
  width:48px; height:48px; border-radius:10px;
  border:2px solid #6b7280; display:grid; place-items:center;
  font-size:28px; line-height:1; user-select:none; color:#9ca3af;
}
.sg-card.add:hover .mark{ border-color:#fff; color:#fff; }

/* ---- Three-dot menu (user styles) ---- */
.sg-card.has-menu .sg-thumb{ position:relative; }
.sg-menu{ position:absolute; top:8px; right:8px; z-index:3; }
.sg-menu-btn{
    
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:10px;
  background: color-mix(in srgb, #000 25%, transparent);
  border:1px solid color-mix(in srgb, #fff 12%, transparent);
  color:#fff; font-size:14px; font-weight:900; line-height:1;
  cursor:pointer; backdrop-filter: blur(3px);
}
.sg-menu-btn:hover{ background: color-mix(in srgb, #fff 15%, transparent); }
.sg-menu-list{
  position:absolute; top:34px; right:0; min-width:160px; overflow:auto; z-index:10;
  background: var(--sg-card);
  border:1px solid var(--sg-border);
  border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.45);
  display:none;
}
.sg-menu-list button{
  display:block; width:100%; background:none; border:none;
  padding:10px 12px; text-align:left; cursor:pointer; color: var(--sg-text);
}
.sg-menu-list button:hover{ background: var(--sg-card-hover); }

/* ---- Favorite (OFF gray / ON yellow glow) ---- */
.sg-fav{
  position:absolute; top:8px; left:8px; z-index:3;
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:999px;
  border:1px solid var(--sg-border);
  background: color-mix(in srgb, var(--sg-chip-bg) 80%, #0000);
  color:#9aa0a6; /* OFF */
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.sg-fav:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--sg-chip-bg) 65%, #0000); }
.sg-fav.is-on{
  color:#ffe075;
  background: radial-gradient(60% 60% at 50% 35%, #ffc400, #cf9b00 58%, #e9a100 100%);
  border-color:#e9b21f;
}

/* 右下ピック印は撤去 */
.sg-pick{ display:none !important; }

/* ギャラリー UI からはJSONロードボタンを見せない */
#loadJsonBtn{ display:none !important; }



/* どこかのCSSに軽く */
.tp-row{margin:8px 0; display:flex; align-items:center; gap:8px;}
.tp-row > label{min-width:72px; opacity:.9;}
.tp-runs{margin-top:12px}
.tp-runs-list{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow:auto;}
.tp-run{padding:8px; background:rgba(255,255,255,.04); border-radius:10px}
.tp-run .line1{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.tp-run .line1 input{flex:1}
.tp-run .line2{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tp-preview{margin-top:12px; display:flex; gap:12px; align-items:flex-start}
.tp-preview-ops{display:flex; flex-direction:column; gap:8px}
.btn-sm{font-size:12px; padding:6px 10px; border-radius:8px; background:#333; border:1px solid #444}
.btn-sm.danger{background:#3b2222; border-color:#553}
.switch{position:relative; display:inline-block; width:38px; height:20px;}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#555;border-radius:20px;transition:.2s}
.switch .slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:#f0b400}
.switch input:checked + .slider:before{transform:translateX(18px)}

/* 文字単位設定パネルを安定配置 */
.tp-modal .tp-tokens {
  position: sticky;
  top: 8px;
}

/* プレビュー領域に最低高さを確保して、上のUIが動かないように */
.tp-modal .tp-preview {
  min-height: 260px;
}

/* サムネイル画像ははみ出さず全面カバー */
.ug-card .ug-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* UG thumb containment */
.ug-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;        /* サムネ置き場の比率を固定 */
  background: #111;
  border-radius: 10px;
  overflow: hidden;
}
.ug-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 収める */
  display: block;
}

/* モーダルの可視/不可視制御をクラスで行う */
.sg-modal{ /* ルート（#stylesGalleryModal 相当） */
  display: none;
}
.sg-modal.is-open{
  display: block;
  pointer-events: auto;
}
.sg-modal.is-closed{
  display: block;            /* visibility/opacity でフェードしている場合も想定 */
  pointer-events: none !important;  /* ← 非表示状態でクリックを絶対に通さない */
}
/* 念のため backdrop も */
.sg-modal.is-closed .sg-backdrop{
  pointer-events: none !important;
}