:root { 
  --dark: #0f172a; 
  --primary: #2563eb;
  --primary-light: #eff6ff;
  --border: #e2e8f0; 
  --bg: #f8fafc; 
  --slate: #64748b; 
  --active-green: #10b981;
}

* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; background: var(--bg); font-family: sans-serif; }

/* 💡 サイドバーは元の通り display: flex で配置 */
.master-control-center { display: flex; align-items: flex-start; min-height: 100vh; }

/* サイドバー (元のスタイルを保持) */
.master-sidebar { width: 280px; background: var(--dark); color: white; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; z-index: 100; }
.sidebar-header { padding: 24px; font-weight: 900; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 16px; }
.nav-group-label { padding: 24px 24px 8px; font-size: 10px; color: var(--slate); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 12px 24px; color: #94a3b8; text-decoration: none; font-size: 14px; transition: 0.2s; }
.nav-item:hover { color: white; background: rgba(255,255,255,0.05); }
.nav-item.active { color: white; background: var(--primary); font-weight: 800; }

.nav-item-header { padding: 10px 24px; font-size: 13px; color: #cbd5e1; font-weight: bold; opacity: 0.7; }
.sub-item { display: block; padding: 8px 24px 8px 48px; font-size: 13px; color: #94a3b8; text-decoration: none; transition: 0.2s; border-left: 3px solid transparent; }
.sub-item:hover { color: white; background: rgba(255,255,255,0.05); }
.sub-item.is-active { color: white; background: rgba(37, 99, 235, 0.15); border-left: 3px solid var(--primary); font-weight: 800; }

/* メインエリア */
.master-main { flex: 1; padding: 40px; min-width: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid var(--border); padding-bottom: 20px; }
.panel-title { font-size: 24px; font-weight: 800; color: var(--dark); margin: 0; display: flex; align-items: center; gap: 15px; }
.mode-badge { font-size: 10px; background: #e2e8f0; padding: 4px 8px; border-radius: 4px; color: var(--slate); font-weight: 900; }

/* 並び替えパーツ (ここが核心) */
.panel-body { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 30px; 
  align-items: flex-start; /* 💡 左側が右側の長さに引っ張られないようにする */
}

/* 💡 左側の「現在の表示順序」を画面に固定 */
.list-section.highlight { 
  position: sticky; 
  top: 40px; /* スクロールしても画面の上部 40px の位置で止まる */
  z-index: 10;
  border: 2px solid var(--primary); 
  max-height: calc(100vh - 80px); /* 画面からはみ出さないように制限 */
  display: flex;
  flex-direction: column;
}

.list-section { background: white; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.section-label { background: #f8fafc; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--slate); font-weight: 800; text-transform: uppercase; }

/* 💡 リスト内のスクロール設定 */
.sort-list { 
  padding: 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
  min-height: 200px; 
  overflow-y: auto; /* 💡 左側が長くなっても中でスクロールできる */
}

.item-card-row { background: white; border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
.drag-handle { cursor: grab; color: var(--slate); user-select: none; }
.item-name { font-size: 14px; font-weight: 700; color: var(--dark); }

.sortable-ghost { opacity: 0.4; background: var(--primary-light) !important; border: 2px dashed var(--primary) !important; }

/* チェックカード (紐付け管理) */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.check-card { background: white; border: 1px solid var(--border); padding: 16px; border-radius: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: 0.2s; }
.check-card.is-selected { background: var(--primary-light); border-color: var(--primary); }
.check-indicator { width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 6px; position: relative; transition: 0.2s; }
.is-selected .check-indicator { background: var(--primary); border-color: var(--primary); }
.is-selected .check-indicator::after { content: 'check'; font-family: 'Material Icons'; color: white; font-size: 16px; position: absolute; top: 0; left: 0; }
.item-cb { display: none; }
.item-label { font-size: 14px; font-weight: 700; color: var(--dark); }

.bottom-action-area { 
  display: flex; 
  justify-content: center; 
  padding: 60px 0; 
  clear: both; 
  margin-top: 40px;
  border-top: 1px solid var(--border);
}

.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}
.btn-primary:hover {
  background: var(--dark);
  transform: translateY(-2px);
}