/* ===== Layout 2-Column – clean (FULL) ===== */

/* ダーク/ライト両対応のためのフォールバック変数 */
:root{
  --bg: #0d0f14;
  --surface: #141820;
  --line: #262b35;
  --text: #e6ebff;
}

/* ---------- ベース ---------- */
.hidden{ display:none !important; }
.btn{ padding:8px 12px; border-radius:10px; background:#222; color:#ddd; border:1px solid #333; cursor:pointer; }
.btn.primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.primary:hover{ filter:brightness(1.05); }
.select{ padding:6px 8px; }
.chk{ display:flex; align-items:center; gap:6px; }

/* ---------- 2カラムグリッド ---------- */
.layout-2col{
  display:grid;
  grid-template-columns: 460px 1fr;
  gap:12px;
  padding:12px;
}

/* ---------- 左：サイドバー ---------- */
.sidebar{ min-width:0; }
.sidebar-tabs{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:8px;
}
.sidebar .tab{min-width:0;}
.sidebar .tab.is-active{
  background:#2b3447; border-color:#59f; color:#fff;
}

/* パネル本体は縦スクロール可能に（高さは画面に追従） */
.panel{ display:none; max-height: calc(100vh - 160px); overflow:auto; }
.panel.is-active{ display:block; }
.panel-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }

/* ギャラリー */
.thumb-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px;
}
.thumb-grid .thumb-item{
  background:var(--btn-bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px;
  position:relative;
  overflow:hidden;
}
.thumb-grid .thumb-item .row{
  position:absolute; inset:auto 6px 6px 6px; display:flex; gap:6px;
  opacity:0; transform:translateY(6px); transition:.15s;
}
.thumb-grid .thumb-item:hover .row,
.thumb-grid .thumb-item.reveal .row{
  opacity:1; transform:none;
}
.thumb-grid img{ width:100%; display:block; border-radius:6px; }

.thumb-grid .thumb-item .row .btn.mini.xs{
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 8px;
}
/* 小さめボタン */
.btn.mini.xs { padding: 4px 8px; font-size: 12px; }

.thumb-grid .thumb-item:hover .row{ opacity:1; transform:none; }

/* ---------- 右：プレビュー ---------- */
.layout-preview { position: relative; min-width: 0; }
.layout-preview .preview-bar,
.layout-preview .preview-foot {
  position: sticky;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--btn-border);
  backdrop-filter: blur(4px);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 5;
}
.layout-preview .preview-foot { top: auto; bottom: 10px; margin-top: 10px; }
.layout-preview .spacer { flex: 1; }

/* キャンバス枠 */
#layout-canvas {
  margin-top: 10px;
  border: 1px dashed #333;
  border-radius: 12px;
  background: repeating-conic-gradient(var(--btn-bg) 0 25%, transparent 0 50%) 50%/16px 16px;
  padding: 12px;
  overflow: hidden;
}


#layout-canvas.is-pan-ready { cursor: grab; }
#layout-canvas.is-panning   { cursor: grabbing; }

#layout-board {
  will-change: transform;
  transform-origin: left top !important;
  background: rgba(125, 125, 125, .25);
}
/* ===== レイヤー一覧（上＝手前） — 単一レイアウト定義 ===== */

/* スクロール容器 */
.layer-list-v2{
  position: relative;
  max-height: calc(100vh - 300px);
  overflow: auto;
  padding-right: 6px; /* スクロールバー分の逃げ */
}

/* 4カラム固定： [掴み] [thumb] [meta] [actions] */
.layer-list-v2 .item{
  position: relative;
  display: grid;
  grid-template-columns: 28px 56px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

/* 視覚状態 */
.layer-list-v2 .item.active { outline: 2px solid #409CFF; }
.layer-list-v2 .item.locked { opacity: .7; cursor: not-allowed; }
.layer-list-v2 .item.layer-hidden { opacity: .45; filter: grayscale(.2); }

/* 掴み(三本線) */
.layer-list-v2 .grab{
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: grab; user-select: none; color: #98a2b3;
}
.layer-list-v2 .item.dragging .grab { cursor: grabbing; }

/* サムネ */
.layer-thumb{
  width: 56px; height: 42px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 6px;
}

/* メタ列（縮め可） */
.layer-meta{ min-width: 0; }
.layer-meta .name{
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* スライダー群：幅に合わせてONELINE→スマホで1列スタック */
.layer-meta .quick{
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 8px; row-gap: 6px; margin-top: 4px;
  min-width: 0;
}
.layer-meta .quick label{ display: contents; }
.layer-meta .quick input[type="range"]{ width:100%; min-width:0; }

/* アクション列：grid末尾で右寄せ（絶対配置にしない）
.layer-actions{
  position:absolute;
  top:0;
  display: flex;
  gap: 6px;
  justify-self: end;
  align-items: center;
  opacity: 0;
  transition: opacity .15s ease;
}
.layer-list-v2 .item:hover .layer-actions,
.layer-list-v2 .item.active .layer-actions,
.layer-list-v2 .item:focus-within .layer-actions{ opacity: 1; } */

/* アイコンボタン（小） */
.icon-btn-mini{
  width: 28px; height: 28px; display: inline-grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer;
}
.icon-btn-mini:hover { filter: brightness(1.08); }
.icon-btn-mini.danger{ border-color:#e11d48; color:#e11d48; }

/* DnD プレースホルダ（点線） */
.layer-list-v2 .ghost{
  height: 58px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  margin: 4px 0;
}
body.is-dragging { user-select: none; }

/* ===== プロパティ（右の詳細） ===== */
.prop-form { display: grid; gap: 8px; }
.prop-form .row { display: flex; align-items: center; gap: 8px; }
.prop-form .row > span { width: 64px; opacity: .8; font-size: 12px; }
.prop-form input[type="text"],
.prop-form input[type="number"] { width: 100%; }
.prop-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prop-form .grid3 { display: grid; grid-template-columns: 1fr; gap: 8px;}
.prop-form .chkline { gap: 16px; }

/* propsヘッダを固定、本文だけスクロール */
.props-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 6px;
  border-radius: 8px 8px 0 0;
}
.props-scroll {
  max-height: calc(100vh - 210px); /* ヘッダ/フッタ分を差し引き。必要なら微調整 */
  overflow: auto;
  padding: 8px 2px 8px 0;
}
.props-scroll .prop-form { padding: 8px 6px; }
.panel-head .spacer { flex: 1; }


/* ズームコントロール */
.zoomctl{display:flex;gap:6px;align-items:center}
.zoomctl .btn{min-width:42px;padding:4px 10px}

/* プロパティパネル: ヘッダ固定 + 本文スクロール */
#panel-props {
  display:none;
  max-height: calc(100vh - 160px);
  overflow: auto;
}
#panel-props.is-active { display:block; }
#panel-props .panel-head{
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
#props-scroll{
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding: 8px;
}

/* ---------- モバイル ---------- */
@media (max-width: 1024px) {
  .layout-2col { grid-template-columns: 1fr; }
  .layout-preview { order: -1; }
  .layout-preview .preview-bar,
  .layout-preview .preview-foot { position: sticky; top: 0; bottom: auto; }
  .thumb-grid { grid-template-columns: repeat(3, 1fr); }
  .layer-meta .quick { grid-template-columns: 1fr; }
}

/* スクロール末尾の被り防止はそのまま */
.layer-list-v2 { scroll-padding-bottom: 84px; }

/* ---------- 全体2段 ---------- */
#layout-mode{
  display:grid;
  grid-template-rows:auto 1fr; /* 1:プレビュー 2:レイヤー */
  gap:8px;
  min-height:calc(100dvh - 56px);
  padding:8px 8px 12px;
}

/* 1段：プレビュー（固定） */
#layout-canvas{
  position:sticky;

  z-index:5;
  border:1px dashed var(--preview-border);
  border-radius:12px;
  background:
    repeating-conic-gradient(var(--btn-bg) 0 25%, transparent 0 50%) 50%/16px 16px;
  padding:12px;
  overflow: hidden;
}
#layout-canvas.is-pan-ready{ cursor:grab; }
#layout-canvas.is-panning{ cursor:grabbing; }

/* 2段：レイヤー一覧 */
#panel-layers{
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:24px;
}

/* ========== レイヤー一覧 (上＝手前) ========== */
.layer-list-v2{ position:relative; scroll-padding-bottom:84px; }
.layer-list-v2 .item{
  position:relative;
  display:grid;
  grid-template-columns:28px 56px auto minmax(0,1fr); /* grab / thumb / meta / actions */
  align-items:center;
  gap:8px;
  padding:8px 10px;
  margin-bottom:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding-right:56px; /* ギア逃げ */
}
.layer-list-v2 .item.active{ outline:2px solid #409CFF; }
.layer-list-v2 .item.locked{ opacity:.7; cursor:not-allowed; }
.layer-list-v2 .item.layer-hidden{ opacity:.45; filter:grayscale(.2); }

/* 掴み */
.layer-list-v2 .grab{
  width:24px;height:24px;display:grid;place-items:center;
  color:#9aa4b3; user-select:none; cursor:grab;
}
.layer-list-v2 .item.dragging .grab{ cursor:grabbing; }

/* サムネ */
.layer-thumb{
  width:56px;height:42px;object-fit:contain;background:#fff;
  border:1px solid var(--line); border-radius:6px;
}

/* メタ(名前+クイック) */
.layer-meta{ min-width:0; }
.layer-meta .name{
  font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.layer-meta .quick{
  display:grid;
  grid-template-columns:36px 1fr;
  column-gap:8px; row-gap:6px; margin-top:4px; min-width:0;
}
.layer-meta .quick label{ display:contents; }
.layer-meta .quick input[type="range"]{ width:100%; min-width:0; }

/* “シュルッ”ツールドロワー（ギア→開閉） */
.layer-list-v2 .gear-btn{
  position:absolute; top:8px; right:8px; z-index:2;
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--btn-bg); border:1px solid var(--btn-border); color:var(--accent);
  -webkit-tap-highlight-color:transparent; transition:transform .14s, background .14s, border-color .14s;
}
.layer-list-v2 .gear-btn:active{ transform:scale(.96); }
.layer-list-v2 .item.tools-open .gear-btn{
  background:var(--btn-primary-bg); border-color:var(--btn-primary-border); color:var(--btn-primary-ink);
}

.layer-actions{
  position:absolute; top:6px; right:48px; z-index:1;
  display:flex; gap:6px; padding:6px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transform:translateX(12px); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
.layer-list-v2 .item.tools-open .layer-actions{ transform:none; opacity:1; pointer-events:auto; }

/* アイコンボタン */
.layer-actions .btn{
  min-width:32px;height:32px;padding:0 8px;border-radius:8px;
  background:var(--btn-bg); color:var(--btn-ink); border:1px solid var(--btn-border);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.layer-actions .btn.danger{ background:var(--danger-bg); color:var(--danger-ink); border-color:var(--danger-border); }

/* DnDゴースト */
.layer-list-v2 .ghost{ height:58px; border:2px dashed var(--line); border-radius:8px; margin:4px 0; }
body.is-dragging{ user-select:none; }

/* ---------- モバイル（超コンパクト&必要時展開） ---------- */
@media (max-width: 820px){
  .layer-list-v2 .item{
    grid-template-columns:40px 40px 40px auto; /* thumb / name / gear */
    gap:8px; padding:8px 12px 8px 8px; padding-right:44px;
  }
  .layer-thumb{ width:40px; height:30px; object-fit:cover; border-radius:6px; }
  .layer-meta .name{
    font-size:13px; line-height:1.2; padding:2px 6px; border-radius:6px;
    background:color-mix(in srgb, var(--panel) 86%, transparent);
  }
  /* クイックUIはデフォ非表示→expanded時だけ表示 */
  .layer-meta .quick{ display:none; margin-top:6px; }
  .layer-list-v2 .item.expanded .layer-meta .quick{ display:grid; grid-template-columns:1fr; gap:6px; }

  .layer-list-v2 .item.tools-open .layer-meta{ padding-right:12px; }
}

/* さらに狭い端末：ドロワーは下段フル幅 */
@media (max-width: 420px){
  .layer-list-v2 .item{ padding-right:12px; }
  .layer-list-v2 .gear-btn{ right:12px; }
  .layer-actions{
    position:static; width:100%; margin-top:8px; justify-content:flex-start;
    transform:none!important; opacity:1!important; pointer-events:auto!important; display:none;
  }
  .layer-list-v2 .item.tools-open .layer-actions{ display:flex; }
  .layer-list-v2 .item.tools-open .layer-meta{ padding-right:12px; }
}
/* --- レイヤー行アクション：狭幅ではデフォルト非表示、tools-open だけ表示 --- */
.layer-actions{ display:flex; gap:6px; }
@media (max-width: 1024px){
  #layer-list .item .layer-actions{ display:none; }
  #layer-list .item.tools-open .layer-actions{ display:flex; }
  #layer-list .item .gear-btn{ display:inline-flex; } /* 歯車で開く */
}

/* 表示領域はレスポンシブ */
.layout-preview,
#layout-canvas {
  width: 100% !important;
  max-width: none !important;
  overflow: hidden; /* はみ出し防止 */
}

/* board は論理サイズ固定（例） */
#layout-board {
  width: 1280px;         /* 固定 */
  height: 720px;         /* 固定 */
  transform-origin: left top !important; /* JSのforceApplyPanZoomと一致 */
}

/* 小画面で CSS 側が transform を当てている古い指定があれば無効化 */
@media (max-width: 1024px) {
  .layout-preview,
  #layout-canvas,
  #layout-board {
    transform: none !important;
  }
}

/* 実寸の“真実”は固定（JSの CANVAS_BASE_* と一致させる） */
#layout-board {
  width: 1280px;   /* window.CFG で 1920x1080 等に変える場合はJS側と一緒に変更 */
  height: 720px;
}

/* 外枠はレスポンシブ。16:9 を保ちつつ内部を transform scale で合わせる */
#layout-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* ====== Layout Canvas – single source of truth (SSR) ====== */

/* 1) 親側の“狭め”対策（flex/grid で幅が潰れないように） */
.layout-preview,
#layout-canvas {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;            /* ← これ大事 */
  overflow: hidden;
}

/* 2) フレーム固定：board は論理サイズを固定（JSの 1280x720 と一致） */
#layout-board {
  width: 1280px !important;
  height: 720px !important;
  transform-origin: left top !important;
  will-change: transform;
}

/* 3) 外枠は 16:9 を維持してレスポンシブに。サイズ合わせは transform に一本化 */
#layout-canvas {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 12px;                      /* チェッカ背景の余白は維持 */
  border-radius: 12px;
  overflow: hidden;
}

/* 4) 旧・競合指定の明示的な解除（スマホ時の scale/translate、固定高さ など） */
@media (max-width: 1024px) {
  /* 旧モバイル用 transform を全て無効化（JS が最終値を当てる） */
  .layout-preview,
  #layout-canvas,
  #layout-board {
    transform: none !important;
  }
}

/* 5) 旧「高さ固定」クラスを無効化（aspect-ratio を使う） */
.canvas-h-fit,
.layout-preview .canvas-h-fit {
  height: auto !important;
  min-height: 0 !important;
}

/* 6) パディングが z の計算を圧迫しないように box サイズを揃える(任意) */
#layout-canvas,
#layout-board {
  box-sizing: border-box;
}

/* 7) レイアウトコンテナの幅潰れ予防（2カラム→1カラムでも効く） */
.layout-2col > * {
  min-width: 0 !important;
}

/* 旧仕様の高さ固定を無効化して、枠は常に16:9で可変にする */
#layout-canvas {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* 高さを固定してしまう旧クラスを無効化（当面の上書き） */
#layout-canvas.canvas-h-fit {
  height: auto !important;
  min-height: 0 !important;
}

/* board は論理サイズ固定（JS と一致させる） */
#layout-board {
  width: 1280px !important;
  height: 720px  !important;
  transform-origin: left top !important; /* JS と揃える */
}

/* モバイルで CSS 側 transform が残っていたら消す */
@media (max-width: 1024px) {
  #layout-canvas, #layout-board { transform: none !important; }
}